- ベストアンサー
JavaScript関数で画像クリックされたか調べる方法は？
- HPのサイドバーに複数の画像リンクを表示しています。
- 画像には同じ名前の関数をonclick属性に指定しています。
- クリックされた画像を判別するための方法を教えてください。
- o2shgi3eatge
- お礼率60% (14/23)
- JavaScript
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 その国別の情報を表示するページは一つのページで行っているんですよね？ ひとつのページでボタンによりそれぞれのデータの取得を実行してページを表示しているのであれば、どの国が選択された状態であるかわかるはずです。 その判別できる値を利用して、onloadイベントで開いておく要素を選択すれば良いはずです。 別々のページに行くのであれば、form内にhidden要素でどの国であるか、を同時に送信すれば良いと思います。 <input type="hidden" name="m" value="japan"> で、受け取って表示する際にjapanを展開するようにすればOKです。 別に全ソースを開示する必要はありませんが、重要なformタグの構成や表示ページの仕様なんかがわかると回答し易いです。
その他の回答 (5)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >location.hrefに値を入れても自動的に転移されなくてただのアドレスを入れてもそうでした。 >調べてみるとform のimageにはsubmit機能がついているためにされにそれが実行されてしまったためと思います。 >なので、formにonsubmit="return false;というのを追加して行うとlocation.hrefのアドレスに転移されました。 >ただ、その場合、formに入れたほかのデータが渡されていないみたいなんですが、どのようにしたらいいでしょうか？ きちんとやりたいことをまとめて設計すればあまりいろいろなことをしなくても実装できるとは思います。 現状ですとformのアクション先に#japan等のハッシュをつけてあげれば良いと思います。 ただし、現在のHTMLがどうなってるか、やりたいことによって手法は多岐にわたりますので的確なアドバイスが難しいです。 現状のHTML、やりたいことを明確に補足いただければもう少し的確なアドバイスが出来ると思います。
補足
回答ありがとうございます。 現在のHTMLはこのWEBサイトが完成したら公開になるお店の商品情報も併せて掲載するWEBサイトです。 今は、その商品情報を載せるページの作成にて、サイドバーに商品の種類別や生産国別でいくつかバナーを並べてそれらをクリックすることでメインページに関連した商品情報が表示されるものを作っています。 今回はまさに例として書かせていただいたことで国別のバナーにて最初は各国名の書かれたバナーだけを表示して「日本」のバナーを押すとメインページに日本製の商品が表示され、サイドバーには日本配下のサブメニューのバナーが表示される仕組みにしたいです。 これまでは、それぞれのバナーに対してformでinput typeのデータなどを渡してactionに指定した転移先にデータを渡して転移先にてデータをPOSTで受け取りデータを扱ってデータを表示することに使っています。 サイドバーはいくつのページにて同じバーを表示させるため、今回でいうリンク元をAとし、リンク先をBとしてまた別のページをCとしたときにA→B,C→Bはもちろん、B→Bも対応したものを作りたいです。 あまりアドレスバーに情報がたくさん乗っかると不格好でもあるので今回のような形だとアドレスバーに表示されるのはできたら避けたいです。 なので、データとして渡したいものも#japan等のハッシュよりはPOSTのような裏で情報を渡して行いたいですが、実現できるものでしょうか？ 一応、関連する会社のWEBサイトで私が実現したい動きをしているところがあります。あまり色々と固定名称を出すのはこのサイトに対してはやりたくないので紹介はしたくないのですが。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >・リンク元でbuttonのJapan/USA/Chinaのいずれかがクリックされるとshow関数を呼び出し、location.hrefというものにtest2.html#*****と設定。 >⇒location.hrefに設定されたアドレスで自動的に転移が行われるわけでしょうか？ location.hrefに値を設定するとページを遷移します。 >・リンク先ではまず<script>タグ内で#以降のIDを取得してその値を引数としてリンク先のshow関数が呼ばれる。 そうです。 >実際のところここから先がまだ解析できてません。 > >⇒var elem = document.getElementsByTagName('div'); > というのはどういう処理なんでしょうか？ タグ名がdivの要素を全て取得しています。 >⇒リンク先にある > <div id="japan" class="area">JAPAN</div> > <div id="usa" class="area">USA</div> > <div id="china" class="area">CHINA</div> > は何に使われているんでしょうか？ すみません。最初のサンプルをそのまま流用したので残っていただけで、特に何もしていません。 ただし機能としてはクリックしたらshow('xxxx')で呼びますので表示・非表示が動作します。 （show関数をページロード時に#xxxで呼び出すか、ボタンで呼び出すかの差です) >このサンプルではサブメニュー自体は記載されていないわけでしょうか？ サブメニューに特化してサンプルを作ったわけではないのであくまで参考例です。 >リンク元ページではサブメニューは全て非表示状態、JAPANボタンを押すとJAPANのページが表示されてそのリンク先のサイドバーにはJAPAN配下のサビメニューだけが表示されている。 >今はリンク元とリンク先のサイドバーは個々に書いていますが理想は一つにまとめたソースファイルから呼び出したいと思っています。 それぞれのページにサイドバーは必要になりますが、PHP等でインクルードするイメージでしょうか。 iframeを利用する、Ajaxでコンテンツ部分を書き換える等他にもいろいろ方法はありますが、思想次第です。
補足
回答ありがとうございます。 location.hrefに値を入れても自動的に転移されなくてただのアドレスを入れてもそうでした。 調べてみるとform のimageにはsubmit機能がついているためにされにそれが実行されてしまったためと思います。 なので、formにonsubmit="return false;というのを追加して行うとlocation.hrefのアドレスに転移されました。 ただ、その場合、formに入れたほかのデータが渡されていないみたいなんですが、どのようにしたらいいでしょうか？
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 サーバサイドの言語も利用できるのであればいろいろ方法があると思いますが、現在の実装方法がわからないためJavaScriptでの一例を示します。 リンク元からはtest2.html#japanのようにリンクをします。 リンク先ではURLに含まれる#japanを取得して先のshow()に渡してあげています。 (URLからIDを取るか、関数の引数で直接IDを指定しているかの違いのみです) 勿論、現状のシステムにはそぐわないかもしれません。 サーバサイドでやるならgetなりpostで受け取った"japan"を書き出す際に使えば良いです。 例えばPHPならshow()内のこの部分を document.getElementById(targetId).style.display = 'block'; こうかけば良い話です。 document.getElementById('<?php echo $hash ?>').style.display = 'block'; こうすると$hashにjapanが入っていれば document.getElementById('japan').style.display = 'block'; が書き出されることになり、同じ動きになります。 ====こっちはリンク元 <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <style> div.area { display: none; } </style> <script> function show ( targetId ) { location.href = 'test2.html#' + targetId; } </script> </head> <body> <button type="button" onclick="show('japan');">Japan</button> <button type="button" onclick="show('usa');">USA</button> <button type="button" onclick="show('china');">China</button> </body> </html> ====こっちはリンク先 <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <style> div.area { display: none; } </style> <script> var targetId = location.hash.replace('#',''); window.onload = function() { show ( targetId ); } function show ( targetId ) { var elem = document.getElementsByTagName('div'); for ( var i = 0; i < elem.length; i ++ ) { if ( elem[i].className === 'area' ) { elem[i].style.display = 'none'; } } document.getElementById(targetId).style.display = 'block'; } </script> </head> <body> <button type="button" onclick="show('japan');">Japan</button> <button type="button" onclick="show('usa');">USA</button> <button type="button" onclick="show('china');">China</button> <hr /> <div id="japan" class="area"> JAPAN </div> <div id="usa" class="area"> USA </div> <div id="china" class="area"> CHINA </div> </body> </html>
補足
こんにちは。具体例を書いていただきありがとうございます。 ただ、私の知識不足なので書いて頂いたソースの解析が難しいのでいくつか処理の流れから問いかけをさせて下さい。 ・リンク元でbuttonのJapan/USA/Chinaのいずれかがクリックされるとshow関数を呼び出し、location.hrefというものにtest2.html#*****と設定。 ⇒location.hrefに設定されたアドレスで自動的に転移が行われるわけでしょうか？ ・リンク先ではまず<script>タグ内で#以降のIDを取得してその値を引数としてリンク先のshow関数が呼ばれる。 実際のところここから先がまだ解析できてません。 ⇒var elem = document.getElementsByTagName('div'); というのはどういう処理なんでしょうか？ ⇒リンク先にある <div id="japan" class="area">JAPAN</div> <div id="usa" class="area">USA</div> <div id="china" class="area">CHINA</div> は何に使われているんでしょうか？ このサンプルではサブメニュー自体は記載されていないわけでしょうか？ リンク元ページではサブメニューは全て非表示状態、JAPANボタンを押すとJAPANのページが表示されてそのリンク先のサイドバーにはJAPAN配下のサビメニューだけが表示されている。 今はリンク元とリンク先のサイドバーは個々に書いていますが理想は一つにまとめたソースファイルから呼び出したいと思っています。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >引数を持たせるやり方で試してみたらうまく行ったと思ったのですが、onclickとformのリンクがonclickの方が早いせいか先にサブメニューが表示された後に次のページが表示されてサブメニューはもとに戻ってしまいました。 これはまた別の話ですよ。先のサンプルでは同一ページ内での表示非表示です。 ページの遷移先でも開いている必要があるのであれば、別の仕組みを考えなければいけません。 というか、クリックした瞬間はサブメニューの表示はいらないのでは？ JAPANを選択してjapan.htmlへ遷移後に開きたいという仕様ではないのでしょうか？
お礼
「不可」ではなく「付加」の間違いです。
補足
回答ありがとうございます。 おっしゃる通り、大事なのは転移後にサブメニューを開きたいのでクリックした瞬間はサブメニューは表示していなくてもいい、というよりも表示したくないです。 JAPANを選択してjapan.htmlに転移した後に、JAPAN配下にサブメニューが表示される仕組みにしたいです。 この場合はどのような記載になるのでしょうか？ 今、formのactionに番号とか不可して転移先のページにてGETで取得してphpからjavascriptを実行しようとしていましたがうまくいきませんでした。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 一番簡単なのはonclick="xxx('japan')"のようにして関数に引数を渡して上げれば良いです。 下のサンプルはそれぞれのボタンにshow('japan'),show('usa'),show('china')と、どのIDを表示するか渡してあげます。 <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <style> div.area { display: none; } </style> <script> function show ( targetId ) { // class="area"の要素をすべて非表示にする var elem = document.getElementsByTagName('div'); for ( var i = 0; i < elem.length; i ++ ) { if ( elem[i].className === 'area' ) { elem[i].style.display = 'none'; } } // すべて非表示のあとに押されたボタンで渡されたIDの要素を表示することにより // 押されたボタンで渡されるIDのみの要素が表示される document.getElementById(targetId).style.display = 'block'; } </script> </head> <body> <button type="button" onclick="show('japan');">Japan</button> <button type="button" onclick="show('usa');">USA</button> <button type="button" onclick="show('china');">USA</button> <hr /> <div id="japan" class="area"> JAPAN </div> <div id="usa" class="area"> USA </div> <div id="china" class="area"> CHINA </div> </body> </html>
補足
回答ありがとうございます。 確かに()とあるので引数を持たせることはできるとは思いましたが、過去にそのようなものを見たことがなかったので気づきませんでした。 引数を持たせるやり方で試してみたらうまく行ったと思ったのですが、onclickとformのリンクがonclickの方が早いせいか先にサブメニューが表示された後に次のページが表示されてサブメニューはもとに戻ってしまいました。
お礼
先にサブメニューをareaで非表示にした後で表示したいものだけを表示するやり方だと表示されたときに上下に余計なスペースみたいなのが出てしまうので以前どおり先にすべて表示した状態で非表示化したいものだけを非表示にする方法にしました。 そして、onclickやonsumit等を使わずにformのactionでリンクされた後にonloadで関数を呼び出して行うとうまくいきました。 問題は「その判別できる値を利用して、onloadイベントで開いておく要素を選択すれば良いはずです。」。 phpなので <body onload="show(<?php print $xxxxx; ?>)"> と書いたのですがうまくいきません。 bodyなのでどのタイミングでPOSTすべきなのでしょうか？
補足
回答ありがとうございます。 おっしゃるとおり、どの国のバナーからクリックされても同じページにリンクされてバナーをクリックされたときにformのhiddenで飛んでくる情報をもとに処理を分けて書いています。 今回、location.hrefでせっかくアドレスバーに付加してリンクできたのに問題がおきているのはそのhiddenの情報が渡されていないため、その情報をもとに処理している部分でデータがないからエラーメッセージが出てしまいました。 >その判別できる値を利用して、onloadイベントで開いておく要素を選択すれば良いはずです。 onloadは(ネットで調べましたが)bodyタグに入れるんでしょうか？ページの読み込みか完了したときに動く関数を指定して。 >別に全ソースを開示する必要はありませんが、重要なformタグの構成や表示ページの仕様なんかがわかると回答し易いです。 項目名は適当ですが今の国バナーのformは以下のような感じにしています。すべて書いていないですけど。 <form name="formname" method="post" onsubmit="return false;"> <input type="image" src="japan.jpg" width="100px" height="30px" onclick="show('81');" /> <input type="hidden" name="catid" value = "1" > <input type="hidden" name="country" value = "81" > <input type="hidden" name="pancate" value = "時計" > <input type="hidden" name="panname" value = "日本の時計" > </form> 先ほどエラーメッセージが出たのはメインページではまず一番上にパンくずリストを表示させるために、hiddenにしてあるデータを使って書く予定がデータが渡されていないためにエラーとなりました。 表示ページの仕様しては上にヘッダ部、下にフッター部があり、今ですと左右にサイドバーがあります。右のサイドバーは今のところただのリンク集的な存在で、左サイドバーにその種類別や国別等のバナーを並べています。 中央のページでは上からパンくずリスト、種類名、表示合計件数、次ページへのリンク／並び替え、そして１ページ最大２０件の商品名や商品画像、簡単な説明やカート等を縦に並べて表示させている状態です。