画像を選択した時のカーソル変更
- スポットエリアを利用して画像の一部を選択した時に、マウスポインタを変更する方法はありますか？
- マウスポインタを変える方法として、<area>タグを使用してスポットエリアを作成し、ホバー時にカーソルの形を変えるように指定することができます。
- しかし、<area>タグではカーソル形状の指定ができないため、JavaScriptやCSSを使用してマウスポインタを変更する必要があります。
- ベストアンサー
画像の一部を選択した時のみマウスポインタを変更
<img src="img.gif" usemap="#sample" border="0"> <map name="sample"> <area shape="rect" coords="10,10,10,10" alt="sample" name="ex"> <area shape="rect" coords="10,10,10,10" alt="sample" name="ex"> </map> というようにスポットエリアを利用して、 そのエリアにカーソルを合わせた時に、 カーソルの形を変えるというような指示はできないでしょうか。。。 style="cursol:xxxx"; を利用するのかと思ったのですが、 できなかったので、、、、。
- hukazuo
- お礼率82% (188/228)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
即興ですがサンプルを作成してみました。 --------------------------------------------------------- <html> <head> <script langage="javascript"> <!--// // カーソルを移動に変更する function cursorMove() { var img = document.getElementById("image"); img.style.cursor = "move"; } // カーソルを標準に変更する function cursorDefault() { var img = document.getElementById("image"); img.style.cursor = "default"; } //--> </script> </head> <body> <img src="Sunset.jpg" id="image" width="800" height="600" border="0" usemap="#sunset"> <map name="sunset"> <area shape="rect" coords="300,200,500,400" onmouseover="cursorMove()" onmouseout="cursorDefault()"> <area shape="default" nohref> </map> </body> </html> --------------------------------------------------------- 以降、説明です。 このサンプルではJavascriptを使用しています。 画像は800×600のSunset.jpgを使用しています。 この画像はWindowsXPのマイピクチャにデフォルトで置いてある 画像ですが、なければ別の画像と置き換えて下さい。 imageタグにはid属性に"image"をセットしています。 usemapに"#sunset"と指定し、mapタグのnameを"sunset"にします。 今回はareaタグで、画像の中心部に200×200の領域を 作成しています。 この領域に対してマウスが乗ったとき、出たときの動作として、 onmouseover、onmouseoutにJavascriptのファンクションを 指定しています。 Javascriptのファンクションでは、まずidが"image"の オブジェクト(ここではイメージタグを指します)を取得し、 これに対してマウスカーソルの変更をしています。 cursorMode()ではマウスカーソルを移動カーソルに、 cursorDefault()ではマウスカーソルを標準に変更します。 参考になれば。
関連するQ&A
- 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
- 吹き出しに画像とコメントを入れるプログラム
下記のプログラムで吹き出しを作成して 画像とコメントを表示したいのですが なかなか出来ず困っております。 方法がありましたらよろしくお願いいたします。 <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初心者です
名前の付け方がわかりません。 なんでもいいのでしょうか？とりあえずわからないので画像名と同じ名前に設定しました。 また、下の記述が全部なのですが画像しかアップされません。 リンクすらなりません。 どこがおかしいのでしょうか。よろしくお願いします。 <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
- クリッカブル・マップのリンクが効かない
下記のコードで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
- クリッカブルマップをロールオーバーをしたい！
画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1422869464 ですが、 <div> <img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map"> <map name="Map3"> <area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_01_02.jpg')" onmouseout="changeMapImage('sample_01.jpg')"> </map> </div> <div> <img src="sample_02.jpg" alt="" width="650" height="149" border="0" usemap="#Map4" id="map"> <map name="Map4"> <area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_02_02.jpg')" onmouseout="changeMapImage('sample_02.jpg')"> </map> </div> このように、クリッカブルを配した画像が続いた場合、なぜか2番目の画像にカーソルを当てると、1番上の画像がロールオーバーされるという。。。 ジャバスクリプト初心者の私にはなぜだか全く分かりません。 他の方法（フラッシュなど）もあるようなのですが、この方法で解決方法を教えて頂けますでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- クリッカブルマップでリンクを貼ったとき…
クリッカブルマップでリンクを貼ったとき、リンク周りにborderのような、枠、色をつけることはできないのでしょうか？ <IMG SRC="photo/建物配置図.jpg" ALT="選択してね" border="0" usemap="#haitizu"> <map name="haitizu"> <area shape="rect" coords="185,247,240,303" href="taikukann.html"" alt="体育館"> </map>
- ベストアンサー
- HTML
- イメージマップでwmvファイルを指定した場合の問題？
クライアントサイドイメージマップのファイル読込み指定に、wmvファイルを指定した場合、クライアント側のWindowsMediaPlayer で動画再生するので、サーバには負荷が掛からないと思っているのですが、正しいでしょうか。スクリプトには以下の記述例を想定しています。 よろしくお願いします。 <img border="0" src="sample/area.gif" usemap="#sample" alt="サンプル" width="384" height="128"> <map name="sample"> <area href="area.wmv" shape="rect" alt="四角形" coords="15,19,126,104">
- 締切済み
- 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
- クリッカブルマップがうまく使えません
<html> <head> </head> <body> <img src="New_Index.jpg" width="100%" height="100%" border=0 alt="toppage" usemap="#index" > <map name="index" > <area shape="rect" coords="367,447,667,500" href="http://www.tuat.ac.jp/~yacht" ALT=" sample"> </map> </body> </html> とやると、ブラウザの大きさが変わるたびに、クリックできる位置がかわってしまうんです・・。 常に一定の位置を指すには、座標を指定するしかないんでしょうか？
- 締切済み
- HTML
- HP制作。クリッカブルマップについて。
HP制作。クリッカブルマップについて。 1つのページにクリッカブルマップを使った画像(オンマウスで画像を入れ替える)を二つ使いたいのですが(たとえばmapAとmapB)上手くいかず、mapAの位置にmapBの入れ替え画像が表示されてしまいます。自分では原因をつきとめることが出来ませんでした。 map nameは分けてあります。リンク先・画像・座標は省略しました。 <img src="画像" alt="マップ" id="map" usemap="#B" border="0"> <map name="A"> <area shape="poly" coords="(略)" nohref onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" > 『省略』 </map> <img src="画像" alt="マップ画像" id="map" usemap="#B"border="0"> <map name="B"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像1"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像2"> 『省略』 </map>
- ベストアンサー
- HTML
お礼
ありがとうございました。 無事、できました＾＾ Javascriptを使用しなければならなかったのですね＾＾；