ベストアンサー

ダイナミックHTML、JavaScriptでの地図の切り替え表示

2009/07/03 12:03

いつもお世話になっています。西日本、東日本の地図を2枚用意し、それぞれクリッカブルにしました。その2枚をホームページ上でダイナミックHTML,JavaScriptを使用して、地図内の「東日本地図へ」「西日本地図へ」というボタンをクリックすることで、切り替わるようにしたいのですが、なにぶん初心者のため、全く方法がわかりません。どなたかご存知の方、ご教授下さい！！！宜しくお願いいたします。

mihomama84
お礼率73% (91/124)

JavaScript
回答数4
ありがとう数6

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2009/07/07 18:28 回答No.4

No1、No3です。＞どうすればいいかというところまではわかっているのですが、＞方法がわかりません・・・ No1の回答は、一つの方法の具体的なサンプルとして提示したつもりでしたが？（何がわかっていて、何がわからないのかよくわかりませんが…）方法は他にもいろいろ考えられます。画像のsrcを指定して、画像を取り替える（描き換える）方法とか、画像を同じ位置に重ねておいて、重なり順を制御するとか… No1は（回答にも書きましたが）表示/非表示の切替えで行う方法です。どの方法でもよろしいかと思いますが、表示/非表示の例にしたのは、スクリプトがオフの時に、全部が表示されるものにしやすかったから。（もちろん、他の方法でも同様のことは可能です）＞何か他の記述が必要でしょうか？ No3にも書きましたように、現在の表示内容の判定にボタンの表示内容を利用していましたので、その部分を修正しないと動きません。もとのもの引数thisの内容は、ボタンオブジェクトですが、ボタンがなくなれば当然不要になるはずです。（あるいは別の引数がいるのかも←コーディングによってどうとでもなります。）ついでながら、no3の補足のhref以下の部分の記述が何を意図しているのか、私には理解できませんでした。そもそも対象とするHTMLソースの構造すら不明ですので、ぴったりのコードになるわけもありませんが、とりあえず、指定div内の画像が順に表示されるという機能に書き直しました。方法はNo1と同じ方法です。（当然ながらコードは違います。）トリガーは何でもOKにしてありますので、クリッカブルマップでもそれ以外でも、また複数あっても可です。（nextを呼び出す毎に、画像が切り替わる。） <html> <head> <style type="text/css"> #Maps img {width:200px; height:200px;} </style> <script type="text/javascript"> window.onload = function() { var e=maps(), i=1; while (e[i]) e[i++].style.display = 'none'; } function next() { var e=maps(), i=0; while (e[i]) if (e[i++].style.display!='none') break; if (i<=e.length) { e[i-1].style.display = 'none'; e[i % e.length].style.display = ''; } return false; } function maps() { return document.getElementById('Maps').getElementsByTagName('IMG'); } </script> </head> <body> <div id="Maps"> <img src="A.jpg"> <img src="B.jpg"> <img src="C.jpg"> <img src="D.jpg"> </div> <button onclick="next();">next</button> </body> </html> なお、スクリプトを使う際は、内容をちゃんと理解した上で使用されることをお勧めします。そうでないと、将来のごく簡単な修正ですら不可能ということになってしまいますので。

質問者

お礼 2009/07/08 04:38

度々のご回答ありがとうございます！早速上記で進めてみたいと思います。今回は時間がなく、かなり場当たり的な対応になってしまいましたが、、、これを機に私もJavaScriptの勉強を始めたいと思います。お手数をお掛けして申し訳ありませんでした！！！

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

fujillin
ベストアンサー率61% (1594/2576)

2009/07/06 10:04 回答No.3

No1です。＞JavaScriptでの地図の切り替え表示とのご質問なので、多少は知識があるものと思います。＞やはりボタンが画像外でないと無理でしょうか？？ボタンはファンクションを呼び出すトリガーになっているだけなので、クリッカブルマップ内に入れたければ、原理的にはトリガーを入れ替えてあげるだけで可能です。ただし、No1の例の場合、ボタンタグがなくなってしまうので、現在の表示（東か西か）を判別している部分などを修正する必要があります。

質問者

お礼 2009/07/07 09:10

度々すみません。ご丁寧なご回答ありがとうございます。私の知識では、どうすればいいかというところまではわかっているのですが、方法がわかりません・・・。マッピングのところに、 <area shape="rect" coords="39,2,119,13" href=javascript:id="link" onclick="change(this)" /> といった感じで入れ込んでみたのですが、反応しませんでした・・・。何か他の記述が必要でしょうか？何度もお手間を取ってしまい申し訳ありません！もしお時間があればご回答頂ければ幸いです！

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2009/07/06 06:31 回答No.2

すこしはしらべてからしつもんし・・けんさくきーわーど css position absolute top left

質問者

お礼 2009/07/07 04:17

ご回答ありがとうございます。この場合CSSのPositionで指定して画像を入替えても Mappingは入れ替わらないため、私の求めている質問の回答内容とはずれると思います。お手数をお掛けしてすみません。

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2009/07/03 12:50 回答No.1

よくやられている方法だと、それぞれのマップの表示/非表示を切り替えてあげる方法。以下、一例です。（スクリプトがオフの場合は両方のマップが表示され、スクリプトがオンの場合は片方のマップと切り替えボタンが表示されます） <html> <head> <script type="text/javascript"> window.onload = function() { var e = document.getElementById('link'); e.parentNode.style.display = 'block'; change(e); } function change(e) { var f = e.innerHTML.substr(0,1)=='東'; e.innerHTML = (f?'西':'東') + '日本の地図へ'; document.getElementById('East').style.display = f?'block':'none'; document.getElementById('West').style.display = f?'none':'block'; } </script> </head> <body> <div style="display:none;"> <button id="link" onclick="change(this)">東</button> </div> <p><div id="East"> <img src="east.jpg" usemap="#eastMap"> </div> <p><div id="West"> <img src="west.jpg" usemap="#westMap"> </div> </body> </html>

質問者

お礼 2009/07/04 05:39

詳しいご回答ありがとうございます！！これで問題なく動作しています♪ もう1点なのですが、実はボタンを地図内の画像として埋め込み、そこをクリックされたときに、東西を入替えようと思っているのですが・・・やはりボタンが画像外でないと無理でしょうか？？お手数なのですが、もしご存知でしたらこちらもご教授頂ければ幸いです！！

ログインすると、全ての回答が全文表示されます。