ＰＨＰで地域を絞り込むスクリプトを探しています。
ズバリ答えて（書いて）いただいた方に高ポイントを差し上げます。
現在、日本全国を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/
なにとぞよろしくお願いいたします。
ベストアンサー
-
kn1967
満足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を書き換えるという手などもありますが、
表示／非表示を切り替えのほうが動作確認などが楽なので、採用してます。
-
anglgm
-
anglgmその他の回答
-
horonict
満足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 /> ...
-
anglgm
-
- その他の回答を読む
この質問へのコメント
質問の情報
- 登録日時
- 2009-12-08 15:59:31
- 終了日時
- 2009-12-09 03:13:31
- 回答条件
- 1人3回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
東海林さだおに詳しい方ご教示ください。 さだおさんが、カレーを食べたいのになかなかカレーにたどり着け…
匿名質問者
2
2
-
プリ小説に関しての質問です 少し前からプリ小説にハマって、自分でも小説を出してみたいなとは思っている…匿名質問者21
-
勉強教えてほしいです 問題 次の言葉から、言葉の頭やあとについて意味をそえる部分を書きなさい ①ごきげ…匿名質問者11
-
母方の氏に変更することは出来るのでしょうか。 母が健在ならば、母に旧姓に戻ってもらう必要が必須ですか…匿名質問者12
-
先週の月曜日におばあちゃんが亡くなりました。 亡くなった人は、49日間は家に居て、49日経ったら空に行く…匿名質問者2