• ベストアンサー

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

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

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

先に質問された解答者さんのNo1のサンプルで <button id="link" onclick="change(this)">東</button> を <button id="link" style="position:absolute;top:XXpx;left:YYpx;z-index:99;" onclick="change(this)">東</button> で、地図に重なるようXXとYYを調整するのではだめですかねえ

mihomama84
質問者

お礼

ご回答ありがとうございます。 この場合だと、ボタンの位置は固定されてしまいますよね。 2枚の地図内には、それぞれ、東、西がわかりやすいように、 西日本地図の東側に、東日本へ、のボタン 東日本地図の西側に、西日本へ、のボタンを 配置したいため、 ボタン位置が固定されてしまうと・・・ といった感じです。 でも、アドバイス、参考になりました！ ありがとうございます！

その他の回答 (2)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.3

私なら 地図の一部にボタンを用意して（画像） クリッカブルにするわね。 地図との親和性抜群だし。 つまり前の質問の#3と同じね。 これができればOKてことね。 > <area shape="rect" coords="39,2,119,13" href=javascript:id="link" onclick="change(this)" /> とりあえず文法的に間違っているわよ。 href=javascript:id="link" が特に意味不明ね。

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

> 別に質問していたのですが～ どこで質問していたのか知らないけど その経緯を教えてくれないと また同じことを繰り返すんじゃない？ > 地図以外のボタン～というボタン 地図のボタン というのは 地図の画像のエリア内に 「東日本地図へ」「西日本地図へ」 というボタンを作成したいってことかしら？ 地図的には結構隙間あるし、 その隙間にボタンをおきたいって言う意図なのかしら。 > その2枚を～切り替わる これはできているのよね？ 今どこまでできているのか 実はまったく何もできていないのか 状況が良く判らないわ。 そして目標もいまいちわからないんだけど。 完成図を描いてみてっていうのも難しいし んー なんとか頑張って説明よろしくっ。

mihomama84
質問者

お礼

ご回答ありがとうございます。 がんばって説明をいれてみます！！ >別の質問～とは http://okwave.jp/qa5094663.html 上記URLでの質問です。 （後日トリガーを入替えるとのご回答を頂いたので、 たぶんこれでいけると思うのですが・・・。） 最初に頂いた回答のJavaScript、ダイナミックHTMLをみると、 地図とは別にボタンがあり、そこのクリックで地図をいれかえる 使用になっています。 ただ、今回も記しているように、 「このときに、地図以外のボタンは使用せず、 地図内に「東日本地図へ」「西日本地図へ」という ボタンを作成し、そこをクリックすることで 切り替えたいと思います。」 ということで、実は地図以外の部分でスペースがとれないため、 地図内にボタンを入れ込みたいと思ったわけです。 現状は、地図はできていて、クリッカブルで、更に 切り替えようのJavaScriptもあるのですが、 ボタンの設定をどうしたらいいのかわからない状態です。 お手数をお掛けしてすみませんでした！！

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

関連するQ&A

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

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

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

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

  • 日本地図の表示

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

  • ゼンリンの地図ソフトに詳しい方教えてください！

    ６年程前に購入したパソコンに付属していたゼンリンの地図ソフトを持っているんですが数年ぶりに利用しました。そこでどうしても理解出来ない事があります。「システム＆西日本」と「首都圏＆東日本」という２枚１セットになっているんですがまず「システム＆西日本」の方をPCにセットしてインストールすることになっています。ここで２点どうしてもわからない事があります。 １．パソコンにインストールしたのにCDをセットしなければ使用出来ないのは何故か？ ２．わざわざ西日本と東日本と２枚にCDが別れているにもかかわらず西日本、東日本ともに全国の地図を観れるのはなぜか？こう考えると「システム＆西日本」のほうはインストールする為だけにCDになるのか？ 説明書類も全て紛失してしまっている為調べるに調べられない状態です。別にこだわならければ済む話なんですが妙に気になって仕方がありません。 ぜひわかる方おられましたらぜひアドバイス宜しくお願い致します。

  • 投稿画面にgoogle地図を表示させたい

    gooブログにgoogle地図を貼りつけたい。 google地図の右上のリンクをクリックし、 「HTML を貼り付けてサイトに地図を埋め込みます」 の下をコピーしブログ記事欄に貼りつけたところ、 プレビューでは地図が出るのですが、投稿画面では、 ソースコードが表示されてしまいます。 大きな地図を見るをクリックすると地図が表示されますが、 地図を直接出す方法を教えてください。

  • カーナビの地図を更新したいのですが。。

    現在イクリプスのAVN8802Dを使用していますが、地図が古くなり更新したいと思っています。 しかしながら更新用の地図が高く困っています。 ちなみにその地図ソフトは東日本と西日本の2枚組みとなっているのですが、地図本体の収録内容は同じもので衛星写真の収録が違っているだけです。 最新の地図はＤＶＤ全国版　vol.3（2枚組） DVR-2004Vです。 いくつかのショップを検索してみたのですが、かならず2枚組みでのセット販売でした。はっきりいって東日本に行くこともないし必要ないので1枚でいいのです。 そういった個人売買の掲示板などご存知の方いらっしゃいましたら是非、教えてください！

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

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

  • AjaxでのHTML呼び出しでjavascriptが読み込まれません。

    自分のホームページにprototype.jsを使用してボタンクリックでのHTML呼び出しをやっているのですが、<script>は無視されてしまいます。 ちなみにコードは、 <input type="button" value="GoogleNews" onclick="new Ajax.Updater('blk','page/sample1.html',{method: 'get'});"/> <input type="button" value="GoogleSearch" onclick="new Ajax.Updater('blk','page/sample2.html',{method: 'get'});"/> <input type="button" value="GoogleMaps" onclick="new Ajax.Updater('blk','page/sample3.html',{method: 'get'});"/> <div id="blk"></div> といったようなカタチです。もちろんprototypeは読み込んでいます。 呼び出すHTMLに<head>をつけてjavascriptだと定義してもダメでした。 ネットでも調べてみましたが、できないようなことがチラっとだけ書かれていました。 私がやりたいのは、ページを移動せずにボタン切替でGoogleSearchAPIやGoogleGadgetを表示させるというものです。 何かいい方法はないでしょうか？

  • HTMLの内容がすべて表示されるまで、ボタンを押せないようにするには

    HTMLで比較的多くの量のデータを表示しており、表示にJavaScriptでコンボボックスの選択肢の初期化等をしています。 通常は、データを表示している途中であってもボタンが押せてしまうため、JavaScriptでの処理がされる前に、不正なデータがサーバーに送られてしまい、不具合が発生しています。 ボタンを使用不可にしておき、JavaScriptで使用可にするなどの対策は思いつきましたが、HTMLのオプションなど、もっと簡単な方法は無いでしょうか。

    • ベストアンサー
    • HTML
  • imgタグとJavaScript

    ボタンのjpgをダウンロードしてJAVAScriptも用意して、 準備が整ったと思った途端、 やり方が全く分からなくなりましたｏｒｚ＿ <img>タグでボタンのイメージを読み込んだはいいものの ボタンをクリックさせた時にどうやってJAVAScriptを 実行させればいいのでしょうか。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する