ズバリ答えて（書いて）いただいた方に高ポイントを差し上げます。
現在、日本全国を8つに分けるための画像を用意し、この画像で日本をエリア分けしております。
北海道・東北地方「hokkaitouhoku.jpg」 北陸地方「hokuriku.jpg」
関東地方「kantou.jpg」 東海地方「toukai.jpg」
関西地方「kansai.jpg」 中国地方「tyugoku.jpg」
四国地方「sikoku.jpg」 九州・沖縄地方「kyusyu.jpg」
それぞれのエリア画像をクリックすればそのエリアにある県名が表示され、
更にその県名をクリックすれば、その県のHTMLページ（全ての県にHTMLペ－ジを用意しています）
にジャンプできる、というスクリプトが欲しいのです。
例えば関東エリアの画像（kantou.jpg）をクリックすれば、
「群馬、栃木、茨城、埼玉、東京、神奈川、千葉」がテキスト表示され、
その中の例えば「東京」をクリックすると、toukyou.htmlにジャンプする、という感じです。
こんな感じをイメ－ジしておりますが、エリアを選んだ後の表示はテキスト表示だけでかまいません。
http://www.mapion.co.jp/
なにとぞよろしくお願いいたします。
No.2
2915
301
250pt
phpはサーバサイドで動くもの。
お望みの形態をphpでカバーしようとすれば、
サーバと何度もやりとりさせるような手間がかかるため、
クライアントサイドで完結させるほうがよろしいでしょう。
以下、一例。
<html> <head> <style> div { display:none; } img { border:1px solid red; width:100px; height:100px; } </style> <script type="text/javascript"> var textChoose = 0; function textChange(i) { if (textChoose > 0) { document.getElementById(textChoose).style.display = "none"; } textChoose = i; document.getElementById(textChoose).style.display = "block"; } </script> </head> <body> <img src="hokkaitouhoku.jpg" alt="北海道・東北地方" onclick="javascript:textChange(1);" /> <img src="hokuriku.jpg" alt="北陸地方" onclick="javascript:textChange(2);" /> <img src="kantou.jpg" alt="関東地方" onclick="javascript:textChange(3);" /> <img src="toukai.jpg" alt="東海地方" onclick="javascript:textChange(4);" /> <img src="kansai.jpg" alt="関西地方" onclick="javascript:textChange(5);" /> <img src="tyugoku.jpg" alt="中国地方" onclick="javascript:textChange(6);" /> <img src="sikoku.jpg" alt="四国地方" onclick="javascript:textChange(7);" /> <img src="kyusyu.jpg" alt="九州・沖縄地方" onclick="javascript:textChange(8);" /> <div id="1"> 北海道・東北地方 <a href="hokkaido.html">北海道</a> <a href="aomori.html">青森</a>・・・以下略 </div> <div id="2"> 北陸地方・・・以下略 </div> <div id="3"> 関東地方・・・以下略 </div> <div id="4"> 東海地方・・・以下略 </div> <div id="5"> 関西地方・・・以下略 </div> <div id="6"> 中国地方・・・以下略 </div> <div id="7"> 四国地方・・・以下略 </div> <div id="8"> 九州・沖縄地方・・・以下略 </div> </body> </html>
※ img のスタイル設定は実際に画像が無い状態でテストするための仮の設定です。
※ imgを使いましたが切り替えプログラムは他のタグから呼んでも良いです。
※ innerHTMLを書き換えるという手などもありますが、
表示／非表示を切り替えのほうが動作確認などが楽なので、採用してます。
No.1
25751
40pt
下記のようにAタグで静的にジャンプさせるのでは不十分ですか？
index.html <a href="kantou.html"><img src="kantou.jpg" /></a> ...
kantou.html <a href="toukyou.html">東京都</a><br /> <a href="kanagawa.html">神奈川県</a><br /> ...
回答ありがとうございます。
No.2
2915301
ここでベストアンサー
250pt
phpはサーバサイドで動くもの。
お望みの形態をphpでカバーしようとすれば、
サーバと何度もやりとりさせるような手間がかかるため、
クライアントサイドで完結させるほうがよろしいでしょう。
以下、一例。
<html> <head> <style> div { display:none; } img { border:1px solid red; width:100px; height:100px; } </style> <script type="text/javascript"> var textChoose = 0; function textChange(i) { if (textChoose > 0) { document.getElementById(textChoose).style.display = "none"; } textChoose = i; document.getElementById(textChoose).style.display = "block"; } </script> </head> <body> <img src="hokkaitouhoku.jpg" alt="北海道・東北地方" onclick="javascript:textChange(1);" /> <img src="hokuriku.jpg" alt="北陸地方" onclick="javascript:textChange(2);" /> <img src="kantou.jpg" alt="関東地方" onclick="javascript:textChange(3);" /> <img src="toukai.jpg" alt="東海地方" onclick="javascript:textChange(4);" /> <img src="kansai.jpg" alt="関西地方" onclick="javascript:textChange(5);" /> <img src="tyugoku.jpg" alt="中国地方" onclick="javascript:textChange(6);" /> <img src="sikoku.jpg" alt="四国地方" onclick="javascript:textChange(7);" /> <img src="kyusyu.jpg" alt="九州・沖縄地方" onclick="javascript:textChange(8);" /> <div id="1"> 北海道・東北地方 <a href="hokkaido.html">北海道</a> <a href="aomori.html">青森</a>・・・以下略 </div> <div id="2"> 北陸地方・・・以下略 </div> <div id="3"> 関東地方・・・以下略 </div> <div id="4"> 東海地方・・・以下略 </div> <div id="5"> 関西地方・・・以下略 </div> <div id="6"> 中国地方・・・以下略 </div> <div id="7"> 四国地方・・・以下略 </div> <div id="8"> 九州・沖縄地方・・・以下略 </div> </body> </html>
※ img のスタイル設定は実際に画像が無い状態でテストするための仮の設定です。
※ imgを使いましたが切り替えプログラムは他のタグから呼んでも良いです。
※ innerHTMLを書き換えるという手などもありますが、
表示／非表示を切り替えのほうが動作確認などが楽なので、採用してます。
大変参考になりました！
ありがとうございます。感謝です！
No.3
1314393
40pt
県を選択部分はクライアントサイド（JavaScript）で実装する方が
素直で一般的だと思います。
JavaScript の map と area を使用すれば、1枚の画像でクリック
した位置によって異なった処理をすることが可能です。
この方がHTML の作成もシンプルですし、細かい範囲指定ができます。
多くの地図サイトでも使用されていますのでサンプルは簡単に見つかる
と思いますが、下記が参考にならないでしょうか。
http://www.hajimeteno.ne.jp/dhtml/dist/js52.html
http://html.eweb-design.com/0603_map.html
http://www7a.biglobe.ne.jp/~wwwwww/kantansakusei/js/map.html
なるほど、参考になります。
ありがとうございます。
24
24
1
2
大変参考になりました！
ありがとうございます。感謝です！