• ベストアンサー

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

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

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答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> なお、スクリプトを使う際は、内容をちゃんと理解した上で使用されることをお勧めします。 そうでないと、将来のごく簡単な修正ですら不可能ということになってしまいますので。

mihomama84
質問者

お礼

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

その他の回答 (3)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

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

mihomama84
質問者

お礼

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

回答No.2

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

mihomama84
質問者

お礼

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

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答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>

mihomama84
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

    いつもお世話になっています。 別に質問していたのですが、自分の求めていた 回答が最後まで得られなかったため、 再度投稿させて頂きます！ 西日本、東日本の地図を2枚用意し、 それぞれクリッカブルにしました。 その2枚をホームページ上でダイナミックHTML,JavaScriptを 使用して、地図内の「東日本地図へ」「西日本地図へ」という ボタンをクリックすることで、切り替わるようにしたいのですが、 このときに、地図以外のボタンは使用せず、 地図内に「東日本地図へ」「西日本地図へ」という ボタンを作成し、そこをクリックすることで 切り替えたいと思います。 どなたかご存知の方、 ご教授下さい！！！ 宜しくお願いいたします。

  • HTML,JavaScript,accessについて...

    HTML,JavaScript,accessについて... こんにちは。趣味でJavaScriptをしている者です。 さっそくですが、質問させていただきます。 html1とhtml2があるとします。 html1に記述してあるJavaScriptでaccessに接続しているときに、 html1のフォームのボタンを押したときに、テキストボックスの入力内容と、 accessにあらかじめ作成しておいたテーブルのレコードに格納されている 文字列データが一致した場合に、html2に移動できるようにしたいのですが、 そのためには、JavaScriptの関数から、accessへSQL文を送ると思うのですが、 どのようなSQL文を作成すればよいのでしょうか？ なにぶん、しろうとですので、説明がわかりにくいかと思いますが、 もしよろしければ、解説していただけないでしょうか。 よろしくお願いします。

  • HTMLとJavaScriptのコードについて

    □ 利用規約に同意する ご予約フォーム 上記「利用規約に同意する」のチェックボックスにチェックを入れるとその下にある「ご予約フォーム」ボタンが無効化から有効化に切り替わり、それをクリックすると別サイトのご予約フォームのページにジャンプできるコンテンツを作成したいのですが、HTMLとJavaScriptのコードをご教授頂ければと思います。よろしくお願い致します。

  • ゼンリン電子地図帳Zi10で詳細な地図が表示されない

    ゼンリン地図の全国版を使っています。 拡張データから東日本、西日本のデータをすべてインストールしました。 ですが、西日本では家の形まで表示されていますがなぜか東日本では表示されません。道を線で書いてあったりコンビニなどの情報だけです。 データをアンインストールしディスクから見るなど、試しましたが駄目でした。 どうすれば詳しく見れるようになるのでしょうか。 OS　Microsoft Windows Vista Ultimate Soft ゼンリン電子地図帳Zi10 DVD全国版

  • ホームページ作成の初心者です。画像（例えば地図　等）中にボタンを挿入し

    ホームページ作成の初心者です。画像（例えば地図　等）中にボタンを挿入し、ボタンをクリックして別の画像とリンクさせたいのですが、その方法をご教授いただければ幸いです。

  • 日本地図の表示

    旅の記録をホームページで公開したいの ですが、ページ中心に日本地図を 置いて、クリックするとその地域の 旅の記録が出てくるようにしたい思ってます。 どこかにフリーで使える日本地図の 画像はないでしょうか？

  • javascript voidについて

    ブログ上にて Ａボタンをクリック　⇒　新しいウインドウで指定サイトＡへ接続 クリック後に 指定サイトＢへのテキストリンクを表示 これを行うにはどうしたらいいでしょうか？ javascript voidを使えばいいような感じで、ネット等で調べると 出てくるのですが、初心者のためわかりません。 ＨＴＭＬの初歩くらいの知識なので、 分かりやすく教えて頂きたいです。 javascript void以外でも方法があればなんでもいいです。

  • Javascript

    Javascript HTMLもソフトも初心者でJavascriptの本は初めて見ています。 Javascriptの本を見ながら、書いてあるプログラムを入力をしてみているのですが、 一定の時間ごとに画像を入れ替えるというのや、 ある部分にポインタを合わせると別の画像に変わるというのがありました。 こういう画像を入れ替えるというのはHTMLとか、Dreamweaverやホームページビルダーなどのソフトでは出来ないものですか？ もしJavascriptでなくてもできるのであれば、なにか利点や欠点はありますか？ Javascript以外の言語（よく知らないのですがPHPやPerlやCGI）でも同じことはできますか？ よろしくお願いします。

  • クリッカブルマップの部分的な画像の入れ替え

    HTMLの頁に大きな一枚の画像を貼り付け、クリッカブルマップで７か所にリンクボタンを作りました。マウスがリンクボタン上に来た時、そのボタンエリアにだけ違う画像を表示したいのですが、どなたかお教え願えないでしょうか？当方javascriptは初心者です。よろしくお願いします。

    • ベストアンサー
    • HTML
  • JavaScript+CSV

    JavaScriptを使ってCSVで記述されたデータを絞り込みたいです　 データバインドを用いて実現できそうですが 3つ以上の条件をボタンでそれぞれ順に絞り込みたいです　 例：）　西日本→人口5,000,000人以上→地下鉄が在る 1つの条件やボタンに全て条件を書き込めばできますが 一つ一つ絞り込みたいです　 ご存知の方　ご教授願います

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する