人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

PHPで地域を絞り込むスクリプトを探しています。
ズバリ答えて(書いて)いただいた方に高ポイントを差し上げます。

現在、日本全国を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/
なにとぞよろしくお願いいたします。

●質問者: anglgm
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:.jpg HTML kansai you. 「東京」
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● horonict
●40ポイント

下記のように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 />
...
◎質問者からの返答

回答ありがとうございます。


2 ● kn1967
●250ポイント ベストアンサー

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を書き換えるという手などもありますが、

表示/非表示を切り替えのほうが動作確認などが楽なので、採用してます。

◎質問者からの返答

大変参考になりました!

ありがとうございます。感謝です!


3 ● Mook
●40ポイント

県を選択部分はクライアントサイド(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

◎質問者からの返答

なるほど、参考になります。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ