- ベストアンサー
areaタグのマウスオーバー時に枠線
HTML上に <area href="a.htm" shape="rect" alt="四角形" coords="1,1,2,2"> のように四角で囲んだところをリンクにすることはできますが、 なおかつ、マウスオーバーしたときに、 四角の部分を色の枠線で囲むことは可能でしょうか？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- Javascriptのマウスオーバー
Javascriptでのマウスオーバーで、Mapを使って画像上に範囲指定しているリンク範囲にボーダーを表示させたいと考えています。 HTMLは、 <html> <head> <title></title> </head> <body> <img src="aaa.gif" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="78,200,228,241" href="bbb.html"> <area shape="rect" coords="326,168,476,209" href="ccc.html"> <area shape="rect" coords="78,141,228,182" href="ddd.html"> </map> </body> </html> このようになっています。 この状態で、マウスオーバー時にリンク範囲をボーダーで囲みたいと思っています。 JavascriptやCSSとの組み合わせ等でいろいろ探してみたのですが、どうしても上手くいきませんでした。どうしたらいいのか教えて下さい。 また、JavascriptやCSSでなくとも同じ事が出来るのでしたら、それで構いません。 どうか宜しくお願い致します。
- 締切済み
- JavaScript
- クリッカブル・マップのリンクが効かない
下記のコードでpngの画像上でリンクをつけましたが、カーソルをかざしても反応が有りません。どこが間違っているのでしょうか？ 皆様、ご教授お願いします <table width="750" align="center"> <tbody> <tr><td> <img src="top2.png" usemap="#top2"> <map name="top2"> <area shape="rect" coords="20,197,63,206" href="http://------.html" alt="A"> <area shape="rect" coords="78,198,121,206" href="http://------.html" alt="b"> <area shape="rect" coords="137,198,181,206" href="http://------.html" alt="c"> <area shape="rect" coords="196,198,239,206" href="http://------.html" alt="d"> <area shape="rect" coords="19,163,63,272" href="http://------.html" alt="e"> <area shape="rect" coords="77,264,121,272" href="http://------.html" alt="f"> </map> </td> </tr> </tbody> </table>
- 締切済み
- XML
- 画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウ
画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウスオーバーがフェードで切り替わるということはできないでしょうか？ 画像にエリア指定をしてマウスオーバーすると画像が変わるということはできたのですが その画像の切り替えをフェードでできないでしょうか 問題のコードです <script>function over(num){ document.getElementById("mg").src="site02/ex/ex_top03"+num+".jpg" } function out(){ document.getElementById("mg").src="site02/ex/ex_top03.jpg" } </script> <div id="main_content_ex"> <img id="mg" src="site02/ex/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/lightbox/ex.htm" onmouseover="over(1)" onmouseout="out()"> <area shape="rect" coords="582,468,790,496" onmouseover="over(2)" onmouseout="out()"> <area shape="rect" coords="800,465,932,493" onmouseover="over(3)" onmouseout="out()"></div> jQueryなどのフェードのエフェクトを使用しようかとも思ったのですが、javascriptでmouseOverの画像を指定しているためどう書いていいかわからなくなってしまいました こういう質問のしかたで大変恐縮なのですが 誰かご教授願えないでしょうか？？ scriptもjQueryも基本を理解できておらず、大変困っています。 大変申し訳ありませんが、お願いいたします。
- ベストアンサー
- JavaScript
- クリックしてリンク先に移動する地図をwebに掲載しましたが
ホームページに地図の画像を掲載して、 その地図にいくつかのクリックできるポイントを設定し、 それぞれリンク先に移動するようにしました。 IEではキレイに地図の画像が表示できているのですが、 FireFoxとか、Netscapeでは地図に青い外枠が表示されます。 赤を基調にしたサイトなので不自然な感じがして困っています。 どのようにこれを回避したらよいのでしょうか。 具体的に下記付け加えるもの等ございましたら教えてください。 よろしくお願いします。 <MAP NAME=map1> <AREA SHAPE=rect COORDS="112,2,196,28" HREF="room1.htm"> <AREA SHAPE=rect COORDS="213,3,298,28" HREF="room2.htm"> <AREA SHAPE=rect COORDS="310,2,399,28" HREF="room3.htm"> <AREA SHAPE=rect COORDS="413,2,495,28" HREF="room4.htm"> <AREA SHAPE=rect COORDS="513,1,594,27" HREF="room5.htm"> <AREA SHAPE=rect COORDS="614,2,701,28" HREF="room6.htm"> </MAP><IMG USEMAP="#map1" SRC="worldmap.gif" WIDTH=702 HEIGHT=29 ALIGN=bottom>
- ベストアンサー
- CSS
- map初心者です
名前の付け方がわかりません。 なんでもいいのでしょうか？とりあえずわからないので画像名と同じ名前に設定しました。 また、下の記述が全部なのですが画像しかアップされません。 リンクすらなりません。 どこがおかしいのでしょうか。よろしくお願いします。 <img src="img/1.jpg" usemap="#1map" border="0"> <map name="1map"> <area shape="rect" coords="220,148,179,200" href="http://12345" alt="**" target="_blank"> <area shape="rect" coords="358,125,181,126" href="http://12345" alt="**" target="_blank"> <area shape="rect" coords="167,336,178,141" href="="http://12345" alt="**" target="_blank"> <area shape="rect" coords="178,338,180,214" href="="http://12345" alt="**" target="_blank"> </map> 関係あるかわかりませんが、使っているのはロリポップです。
- ベストアンサー
- HTML
- 吹き出しに画像とコメントを入れるプログラム
下記のプログラムで吹き出しを作成して 画像とコメントを表示したいのですが なかなか出来ず困っております。 方法がありましたらよろしくお願いいたします。 <img src="画像名" usemap="#map" border="0"> <map name="map"> <area shape="rect" coords="305,60,390,126" href="アドレス" alt="北海道"> <area shape="rect" coords="288,151,331,181" href="アドレス" alt="青森"> <area shape="rect" coords="280,181,311,221" href="アドレス" alt="秋田"> <area shape="rect" coords="310,181,341,221" href="アドレス" alt="岩手"> <area shape="rect" coords="275,221,305,245" href="アドレス" </map>
- ベストアンサー
- JavaScript
- mapが機能しない
以下のようにmapを設置しましたが、全く機能しません。何が考えられるでしょうか？ <div><img src="images/head.jpg" alt="" usemap="#map" border="0"/></div> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> <area href="kan.html#2" alt="" shape="rect" coords="314,3,393,154" /> <area href="kan.html#1" alt="" shape="rect" coords="106,3,211,146" /> </map>
- ベストアンサー
- HTML
- イメージマップで文章を表示したい。
下記の例のように、「map.gif」という画像の各箇所ごとにそれぞれのリンクを貼るのは下記の方法で出来ると思うのですが、 「coords="22,11,122,62"」にマウスが乗ったときに指定した箇所に文章を表示するにはどうしたらよいのでしょうか？ ※それぞれの箇所によって、それぞれ違った文章を表示したいです。 ※「map.gif」という画像が表示されている上段（下段でもＯＫ）に枠を作って、その中に説明文が表示される仕組み。 <img src="map.gif" alt="サンプル" usemap="#sample"> <map name="sample"> <area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1"> <area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2"> <area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3"> <area shape="default" href="map4.html" alt="リンク4"> </map> 宜しくお願いします。
- ベストアンサー
- HTML
- 画像に複数リンクをはる方法（イメージマップ）
画像は表示されるのですが、リンクがはれません。 どこがおかしいのでしょうか？ リンクをはる画像と、リンク先は別フレームで、表示させたいフレームの名前はinです。 ついでに、リンクをクリックした瞬間に出る点線の消し方もわかる方がいたら教えてください。 よろしくお願いします。 タグ（html内）↓ <body> <img src="http:～" usemap="mn"> </body> <map name="mn"> <area shape="rect" coords="298,298,355,262" href="http:～l"target="in"> <area shape="rect" coords="298,276,319,285" href="http:～"target="in"> <area shape="rect" coords="324,273,362,288" href="～html" target="in"> <area shape="rect" coords="367,276,399,286" href="～html" target="in"> </map>
- 締切済み
- HTML
- 画像マップしたリンク先をクリックするとフェードでリンク先のページに切り
画像マップしたリンク先をクリックするとフェードでリンク先のページに切り替わることなどできないでしょうか？？ 問題のコードです <div id="main_ex"> <img id="mg" src="site02/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/ex_01.htm"> <area shape="rect" coords="582,468,790,496" href="site02/ex_02.htm"> <area shape="rect" coords="800,465,932,493" href="site02/ex_03.htm"></div> href="site02/ex_01.htmに切り替わるときにフェードで切り替わりたいです。 (site02/ex_02.htm site02/ex_03.htmも同様) jQuery でも javascriptでもかまいません。 なにかよい考えございましたらぜひお教え願えたらと思います。 甘えた質問で申し訳ありませんが、よろしくお願いいたします。
- 締切済み
- JavaScript
