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/
なにとぞよろしくお願いいたします。

回答の条件
  • 1人3回まで
  • 登録:2009/12/08 15:59:31
  • 終了:2009/12/09 03:13:31

ベストアンサー

id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012009/12/08 18:17:27

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

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

id:anglgm

大変参考になりました!

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

2009/12/09 03:11:28

その他の回答(2件)

id:horonict No.1

horonict回答回数257ベストアンサー獲得回数512009/12/08 18:04:20

ポイント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 />
...
id:anglgm

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

2009/12/09 03:09:59
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012009/12/08 18:17:27ここでベストアンサー

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

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

id:anglgm

大変参考になりました!

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

2009/12/09 03:11:28
id:Mook No.3

Mook回答回数1312ベストアンサー獲得回数3912009/12/09 00:20:35

ポイント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

id:anglgm

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

ありがとうございます。

2009/12/09 03:11:33

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • PHP ? スクリプト ? それは単なる HTML だと思うのですが、気のせいですか? それに、8 つも画像を用意せず、クリッカブルマップにした方が良いのでは?
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません