クリッカブルマップのタップした場所をハイライト

2023/10/24 14:17

このQ&Aのポイント

Android 4 Chromeでクリッカブルマップのタップ場所がハイライトされない
iPhone対策のontouchstartなど試したが反応せず
クリッカブルマップはPCでもハイライトしない

ベストアンサー

クリッカブルマップのタップした場所をハイライト

2012/10/24 09:44

クリッカブルマップ（クライアントサイドイメージマップ）の質問です。 Android 4 Chromeにて、クリッカブルマップでタップしたareaがハイライトしません。 iPhone対策のontouchstartなど試しましたがだめ。 <area>にonclickでthis.style.borderを変えても反応せず。 cssでarea:activeなどしてみてもダメ。よく考えたらクリッカブルマップはPCでもハイライトしないですよね。ちなみにAndroid 4 ブラウザではハイライトしてくれます。いい技はないでしょうか？サンプルはこちらです。お手元のスマホでお試しください。 http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

qoozy
お礼率73% (31/42)

CSS
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/10/24 11:31 回答No.1

mapでの座標指定は利用することができません。もっとも良いのは、mapではなくスタイルシートで矩形領域を指定して、色がわかる部分だけ色を変えた背景に置き換えることです。 [例]日本地図で東京都に合わせると東京都の色が変わる方法 1) 通常のナビゲーションリストを作成します。 2) リンク(A要素)をスタイルシートで(sttic以外の)地図上にabsoluteで配置します。 3) 矩形領域にも地図と同じ背景を位置を指定して配置します。　（外見上は同じに見えます。） 4) その矩形領域にマウスオンすると、東京都部分だけ色の変わった地図に変更されます。　テキストブラウザやスクリーンリーダー、パソコンは無論、検索エンジンにも利用できる方法としたらこの方法が良いでしょう。ただしあまり複雑な図形には向きません。　スマホ限定でしたら、canvasを利用する方法が良いでしょう。これは人にアドバイスできるほど詳しくないのでご勘弁を

関連するQ&A

クリッカブルマップがきかない！？
html初心者です。地図の画像上に複数のにクリッカブルマップを作成して、同ページ内のアンカーリンクへリンクを設定しています。 ※クリッカブルマップはDreamweaverで作成しています。 IEではちゃんとリンク先に行くのですが、ネスケだと、リンク先に移動しません。。どこが悪いのでしょうか？？ソースは下記にある通りです。なにか決定的にタグが抜けているんでしょうか？？皆様、初心者な私にどうか教えてください。よろしくお願いします。。。 ---------------------------------------------- <BODY> <div align="left"> <img src="image/map.gif" width="500" height="300" border="0" usemap="#Map"> <MAP name="Map"> <AREA shape="rect" coords="342,38,447,65" href="#01"> <AREA shape="rect" coords="333,108,439,144" href="#02"> </MAP> </div> <div> <A name="#01">一丁目</A> <A name="#02">二丁目</A> </div> </BODY>
- ベストアンサー
- HTML
JavaScriptで画像置換えてクリッカブルマップは可能でしょうか？
RADIOボタンを使って、画像の入れ替えは出来たのですが、それぞれの画像に異なるクリッカブルマップを定義することは可能でしょうか？以下のような記述をし、imgタグ内のusemapに値を渡せば、クリッカブルマップの位置も変わるかと思ったのですが、変化しません。記述方法が間違っているのでしょか？ご教授のほど、よろしくお願いします。 <SCRIPT Language=JavaScript>  </SCRIPT> </head> （中略） <map name=FPMap0> <area href="Link1.html" target=_self shape=rect coords="10,10,20,20"> </map> <map name=FPMap1> <area href="Link2.html" target=_self shape=rect coords="50,10,60,20"> </map> <img border=0 src="図1.GIF" usemap="#FPMap0" NAME=MapImg> <FORM NAME=myFORM> <INPUT TYPE=radio name=R1 onClick=changeMap('図1.GIF','#FPMap0') checked>図1<br> <INPUT TYPE=radio name=R1 onClick=changeMap('図2.GIF','#FPMap1')>図2 </FORM>
- ベストアンサー
- JavaScript
レスポンシブデザインでイメージマップ
レスポンシブデザインでウェブサイトを制作しています。その中で、イメージマップ（クリッカブルマップ）を使おうとしているのですが、スマホ縦で表示しますと、画像の大きさが変わりますので、リンクエリアがずれます。そこで、jQuery RWD Image Mapsというものを見つけましたので、これを取り入れることにしました。 https://github.com/stowball/jQuery-rwdImageMaps が、うまく動きません。試しに、シンプルなレスポンシブデザインのサンプルページがあったので、そのソースを拝借して、そこでこのjQueryがうまく動作するかテストしてみました。 HTML http://wakabaya.main.jp/example-09.html CSS http://wakabaya.main.jp/responsive-09.css jQuery http://wakabaya.main.jp/js/jquery.rwdImageMaps.min.js シンプルなサイトですので、何か他のjQueryやスタイルシートが干渉するということもないはずなのですが、やはり動きません。ロゴ画像のSのあたりをリンクエリアとして指定し、パソコンではそこがリンクエリアとなっていますが、スマホ縦ではロゴ画像のynの下あたりにリンクエリアがきています。 jQueryを使うのは今回が初めてで、何か、初歩的なミスをしているのではないか…、と思うのですが、その原因が見つけきれず、こちらで質問させていただきました。どういった原因、解決策が考えられるでしょうか。よろしくお願いします。
- ベストアンサー
- JavaScript
アイフレームとクリッカブルマップ
こんばんわ、イメージマップ(クリッカブルマップ)とアイフレームを一緒に使いたいのですが、どうしてもできません＞＜　マップのソースが <IMG src="背景画像" usemap="#g" border="0"> <MAP name="g"> <AREA shape="poly" coords="470,471,466,479,457,482,448,479,445,471,448,463,457,460,466,463" href="★" target="aifurenaka" alt="MEMO"> <AREA shape="poly" coords="547,464,543,472,534,475,525,472,522,464,525,456,534,453,543,456" href="★" target="aifurenaka" alt="ABOUT"> <AREA shape="poly" coords="622,470,618,478,609,481,600,478,597,470,600,462,609,459,618,462" href="★" target="aifurenaka" alt="BOARD"> <AREA shape="poly" coords="692,467,688,475,679,478,670,475,667,467,670,459,679,456,688,459" href="★" target="aifurenaka" alt="MIX"> <AREA shape="default" nohref> </MAP>
- 締切済み
- HTML
クリッカブルマップにロールオーバーを付ける
クリッカブルマップにロールオーバー（Javascript）を付けようと思うのですが、どうも目指していることが上手くいきません。まずは、下記サイトをご覧ください。 http://www.webdlab.com/template/clickable2/ これはソースコードが乗っているサイトです。この通りに書けば、通常のロールオーバーはできるのですが、私の目的はあと＋α必要になります。 [内容] 1.　オンマウス時にロールオーバー 2.　クリック後も、ロールオーバー状態 3.　他のイメージにオンマウスしても、さっきクリックしたイメージがロールオーバー状態４．他のイメージをクリックして、はじめてロールオーバー画像が切り替わる。以上です。ちなみに現状（上記サイト）は.onmouseover、.onmouseout、.onclickの３つすべてロールオーバー後のイメージを指定すれば[内容]の１と２まではクリアなのですが、３以降がNGです。そもそもクリッカブルのロールオーバーでは不可能なのでしょうか。どなたがご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
クリッカブルマップで切り替えた先の画像に部分リンク
javaスクリプトを使ってクリッカブルマップで画像差し替えをしています。（下記コード）イメージでいうとボタン(1)(2)(3)とエリアAで成る一枚の画像の、ボタン(1)(2)(3)の箇所にマウスオンをすると画像が切り替わり、エリアAにそれぞれ違う説明が表示される(ように見える)・・・というものをJavaスクリプトを使って作りました。この、切り替わった後のエリアAに表示された説明内に、更にクリッカブルマップを設定しリンクを貼りたいのですが、方法がわかりません。詳しい方、教えてください。 <script type="text/javascript"> function button1_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像1'; } function button2_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像2'; } function button3_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像3'; } <figure> <img src="元画像" alt="○" usemap="#image_map" id="map" /> <map id="image_map" name="image_map"> <area shape="poly" coords="省略1" onmouseover="button1_over()" href="#" alt="～～～" /> <area shape="poly" coords="省略2" onmouseover="button2_over()" href="#" alt="～～～" /> 　　 <area shape="poly" coords="省略3" onmouseover="button3_over()" href="#" alt="～～～" /> </map> </figure>
- ベストアンサー
- JavaScript
初心者です。クリッカブルマップonclickの後
javascript初心者です。クリッカブルマップにおいて指定area内をクリックすると画像が差し替えになる状態です。差し替え後の画像はarea範囲よりも大きい（マップ全体と同一サイズ）なのですがこのarea座標外でクリックして、元画像に戻るようにしたいです。現在は、area座標内をクリックしないと元画像に戻りません。 ■jabascript function circle01_over(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'ロールオーバー後の画像（元画像と同じサイズで一部だけ変えたもの）'; } function image_out(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = '元画像マップ'; } function circle01_click(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'クリック後の画像'; } ■html <img src="元画像" class="hover" alt="" width="XXX" height="XXX" usemap="#Map" id="元画像マップ" name="元画像マップ" /> <map name="Map" id="Map"> <area shape="circle" coords="***,***,***" href="javascript:void（0）;" onmouseover="circle01_over()" onmouseout="image_out()"" onclick="circle01_click(); return false;" alt="サンプル" /> 初歩的な事で申し訳ありません・・・尚、jQueryも新規リンク（html）も使用不可です。添付画像のように動作させたいです。宜しくお願い致します。
- ベストアンサー
- JavaScript
クリッカブルマップの一部分だけを消す方法を教えて下さい！
javascript初心者です。やりたいことは、下記の通りなのですが、どなたか対処方法を教えて頂けないでしょうか？透過PNGの画像を重ね合わせ、レイヤーのように表示した状態で、各画像の透明部分以外のオンクリックで画像を入れ替え、さらに上の階層の画像を消して下の階層の画像のオンクリックでも画像を入れ替えたいのですが、上手くいきません。。たとえば、余白部分が透明な丸と四角のPNGを、丸が上になるように重ね、丸をクリックすると丸の色だけが、四角をクリックすると四角の色だけが変わり、さらに丸を非表示にして下の四角をクリックしすると、四角の色が変わるようにしたいのです。四角PNG + 丸PNG + 透明PNGを重ね合わせ、透明PNGに丸と四角のクリッカブルマップを重ねて持たせることで、両方見えた状態でそれぞれの色を変えることはできたのですが、丸を非表示にする時に丸のクリッカブルマップだけを消すことができず、丸があったところだけクリックが効かなくなってしまいます。根本的なやり方がまずいのでしょうか？よろしくお願いします。ソース抜粋 <script type = "text/javascript">  </script> <map name="Map" id="Map"> <area name="map2" id="map2" shape="circle" coords="丸の座標" onClick="document.layer2.src='丸の画像2'" /> <area name="map1" id="map1" shape="rect" coords="四角の座標" onClick="document.layer1.src='四角の画像2'" /> </map> <div style="position:absolute;top:30px; left:0px"> <img src="四角の画像1" alt ="" name="layer1" id="layer1" /> </div> <div style="position:absolute;top:30px; left:0px"> <img src="丸の画像1" alt ="" name="layer2" id="layer2" /> </div> <div style="position:absolute;top:30px; left:0px"> <img src="透明な画像" alt ="" usemap="#Map" /> </div> <input type="button" value="丸消す" onClick="remove()" />
- ベストアンサー
- JavaScript
背景画像にクリッカブルマップでリンクを飛ばす方法
背景画像にクリッカブルマップを使用してリンクを設定したいと思っているのですが上手く設定できません。どなたかご教示頂けないでしょうか。そもそも出来ないものでしょうか？ ■CSSで書いているのは .bodytitle { background-image: url('http://**************/title.jpg' width="750" height="269" border="0" usemap="#maintop"); } ■HTMLのbodyの中に書いているのは <map name="maintop"> <area shape="rect" coords="12,10,280,80" href="http://******/" target="_blank"> <area shape="rect" coords="510,8,740,71" href="http://******/" target="_blank"> </map> お手間おかけしますがどうぞよろしくお願い致します。
- ベストアンサー
- デザイナー・クリエイティブ職
複数画像にクリッカブルマップ
当方、HTML・CSSは少しだけ分かりますが、javascriptの知識がありません。添付の画像のように、ひとつのHTML内に複数の画像を置き、それぞれの中に複数のクリッカブルマップ（ロールオーバーも可能）を設置したいのですがうまく動きません。。 ■javascript　（動かず） if(navigator.appVersion.charAt(0) >=3){ var rolimg = new Array(); for( i = 0 ; i < 10 ; i++ ){ rolimg[i] = new Image(); } rolimg[0].src= "img/0.jpg" rolimg[1].src= "img/1.jpg" rolimg[2].src= "img/2.jpg" rolimg[3].src= "img/3.jpg" rolimg[4].src= "img/4.jpg" rolimg[5].src= "img/5.jpg" } function paintRol(dim,cnt){ if(navigator.appVersion.charAt(0) >= 3 ){ document.images[dim].src=rolimg[cnt].src; } } ■HTML  <img src="img/0.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',2)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',3)" onMouseOut="paintRol('rollover',0)" /> </map>  <img src="img/4.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',5)" onMouseOut="paintRol('rollover',0)" /> </map> ------ よろしくお願いします。
- 締切済み
- JavaScript