- ベストアンサー
クリッカブルマップとチェックボックスを連動させたい
Webフォーム制作について教えてください。 □北海道 □本州 □四国 □九州 というチェックボックスがあります。その下に日本地図を置いて、日本地図をクリッカブルマップにします。 たとえば地図上の北海道部分をクリックすると、チェックボックスの「□北海道」のところにチェックが入るようにしたいのです。 さんざんググってみましたが挫折いたしました。どうか宜しくお願い申し上げます。
- _Miya
- お礼率100% (1/1)
- その他(インターネット・Webサービス)
- 回答数1
- ありがとう数1
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
Javascriptを使って以下のような感じでどうでしょう? <script type="text/javascript"> function sample(targetId){ var target = document.getElementById(targetId); target.checked = !target.checked; return false; } </script> HTML部分(抜粋) areaにonclickを付ける(対応させるinputのidを指定) <area ~ onclick="return sample('Area1')"> <area ~ onclick="return sample('Area2')"> <input type="checkbox" id="Area1"><label for="Area1">北海道</label> <input type="checkbox" id="Area2"><label for="Area2">本州</label>
関連するQ&A
- クリッカブルマップ上をonMouseで画像を変化させたい
タイトルどおりなのですが、日本地図の画像にクリッカブルマップが指定してあります。 例えば北海道にマウスをあてたときに、北海道の部分の色を変えるようにしたいのですが、可能でしょうか。 (もちろんリンクも可能で。) スタイルシートなども駆使してみたのですが、できませんでした。 ご教授よろしくお願いいたします。
- 締切済み
- JavaScript
- クリッカブルマップでページを開くとき
簡単な地図をかいて、クリッカブルマップにした のですがそれぞれのお店の写真をクリックすることで お店の中の写真が一枚だけ出るようにしたいんです。 現時点では、クリックすると新しいブラウザが開いて 大きいところにポツンと写真一枚です。 写真の大きさくらいの、小さいブラウザを開きたい のですが、できますか? ちょっと、説明が悪いかも知れませんが何か良い案が ある方教えて下さい。
- ベストアンサー
- その他(インターネット・Webサービス)
- クリッカブルマップ(イメージマップ)について
検索してもどうしても難しく、ここにて質問させて頂きます。 http://www.pds-navi.com/ 上記のサイトのように日本地図を作りたいのですが、各説明サイトをみても座標がどうのとかで分かりません。 簡単にこのようなクリッカブルマップ地図を製作できるツール等ありますでしょうか? 当方windows7です。 宜しくお願い致します。
- ベストアンサー
- CSS
- クリッカブルマップについて
クリッカブルマップについて教えていただきたい点がございます。 例えば、以下のような記述をした場合。 ■例 <a href="***.html"> <img src="***.jpg" alt="***" width="***" height="***" border="0" usemap="#Map" /> </a> <map name="Map" id="Map"> <area shape="rect" coords="***" href="***.html" alt="***" /> </map> エリア指定した部分以外のところは<a>タグでのリンクになり、エリアで指定している部分はそのURLになるかと思うのですが、Firefoxですとうまく遷移するのですが、IEだとクリックしてもエリア指定した部分しかページ遷移をしてくれません。 ※ブラウザ左下のマウスオーバー時にでるURLは飛び先を認識しているのですが、クリックしても反応が無いのです。。。 IEはshape="default"にも対応していないようですし、一部分のみをエリアで指定し、それ以外のところは全体的に別のリンクを指定したい場合、どういった記述をすればよいのでしょうか? shape="poly"で囲んでも問題は無いのですが、あまり見た目が良くないので。。。 また、これよりも良い方法があるなど、ご存知の方がいらっしゃいましたら、ご教授いただけますと幸いでございます。 ----------------------------------- 私が制作時に確認をしているブラウザのバージョンは次の通りです。 Firefox:3.6.12 IE:8.0 ----------------------------------- 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- PHPと連携したクリッカブルマップを
<form action="test.php?cate1=27&cate2=2&cate3=blue" method="post" name="x1" id="x1"> <input name="check[001]" type="hidden" value="12345" /> <input type="submit" value="北海道の情報を表示" /> </form> 現在地域ごとにリンクを設置し、test.phpに情報を送っています。 上記のようにボタンを設置したタイプにしているのですが、 今後はクリッカブルマップにしていきたいと考えています。 <area shape="poly" coords="XXX,XXX,XXX" alt="" /> クリッカブルマップは上記のように設定しており、単純にクリッカブルマップとしては機能しております。PHPとのリンクに詳しくないのでどういった形でPHPに情報を渡してやればいいか検討がつきません。 ご存知の方いらっしゃいませんでしょうか。
- 締切済み
- HTML
- 日本を構成する4島の名称は北海道島、本州島、九州島・四国島?
日本は本州・九州・四国・北海道の4つの大きな島と、その他の島から成り立っていますよね。本土を構成する4つの島の名称は、なんと言うのでしょうか? 本州島・九州島・四国島・北海道島で良いのでしょうか? 単に正式名称が、本州・九州・四国・北海道で良いとすればなんで島と付かないのでしょうか? イギリス本島ですらグレートブリテン島と言うのに、日本本土だけ○○島と付かないのは異例な気がします。
- ベストアンサー
- 地理学
- チェックボックスに連動する画像ボタン
webページで、チェックボックスにチェックを入れないとアクティブにならないロールオーバーボタン(画像)を設定したいのですが、方法がわかりません。 【チェックボックスにチェックが入っていない状態】 ボタンが反転しており、クリックで動作(ページ遷移)しない (ボタンがグレー状態になっているなど) 【チェックボックスにチェックが入っている状態】 ボタンが変化し、クリックで動作する (ボタンの画像が変わり、ロールオーバーも可能) このような形にしたいと思っています。 今のところ input typeがbutton だとうまくいくのですが input type image で動作しないという状態です。
- ベストアンサー
- JavaScript
- 吉里吉里のクリッカブルマップについて
現在吉里吉里でマップの部分を作っているのですが、 クリッカブルマップの画像の作り方がよくわからず困っています。 http://www.ultrasync.net/dee/kr2helps/kag3doc/contents/ClickableMap.html を参考にして作っているのですが、パレットインデックスという部分でつまづいております。手順としては下記の通りで大丈夫なのでしょうか? (photoshop CS2使用) 1.photoshopのモードがRGBの状態で、 クリックしてアクションを起こしたい箇所にそれぞれ色を流し込んで行く。 2.モードをインデックスカラーに変える。 使用中の色をすべて割り当てる でOK 3.画像を別名保存でpng形式で保存 で、それぞれのカラーの番号というのは、photoshopの[イメージ]→[モード]→[カラーテーブル]を参考にして確認していく…。 というやりかたでいいんでしょうか? パレットインデックスというものがなんなのかよくわかりません…。 256色に番号を割り当てるらしいものということはわかるのですが、その情報がpng画像自体にも記憶されているのかどうなのか。 photoshopでの画像の制作方法、手順について教えて頂けましたら幸いです。 未熟者なためおかしな表現があるかもしれませんが、どうぞよろしくお願い致します!
- ベストアンサー
- その他(ソフトウェア)
- 本州のみの道路地図
本州のみの道路地図 お世話になります 本州のみの道路地図が欲しいのですが 本屋でみかけません 必要としている道路地図は ○あまり大雑把なものではなくそこそこ細かな地図 ○北海道 九州 沖縄は来るまで旅行しないので不要 四国は載っているとありがたいです 漠然とした条件もありますが こんな条件に合う道路地図を御存知でしょうか? 御存知の方がおられればお教えください
- ベストアンサー
- その他(国内旅行・情報)
- クリッカブルマップをCSSでロールオーバーする方法
webプログラマです。 いろいろやってみましたが、どうしても方法が分かりません。 ネットでもずいぶん調べましたが、見つけられませんでした。 クリッカブルマップで指定したareaの部分だけを CSSを使って別の画像をロールオーバーしたいのです。 JavaScriptを使う方法や、 CSSでも他の方法は分かっていますが、 ページがかなり複雑な構成で、 divタグだらけになっていますので、 出来ればa:hoverのようなシンプルな方法を探しています。 ちなみに、この画像を背景にすることは、 制作意図的にできませんので、 画像挿入の上、マップというのが前提になります。 どなたか方法をご存知の方、ご享受ください。 よろしくお願いします。
- 締切済み
- HTML
お礼
うぎゃー、ありがとうございます! 哀しいまでに完璧に動きました。 ほんと助かりましたーー。