- ベストアンサー
画像を選択した時のカーソル変更
- スポットエリアを利用して画像の一部を選択した時に、マウスポインタを変更する方法はありますか？
- マウスポインタを変える方法として、<area>タグを使用してスポットエリアを作成し、ホバー時にカーソルの形を変えるように指定することができます。
- しかし、<area>タグではカーソル形状の指定ができないため、JavaScriptやCSSを使用してマウスポインタを変更する必要があります。
- みんなの回答 （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()ではマウスカーソルを標準に変更します。 参考になれば。
お礼
ありがとうございました。 無事、できました＾＾ Javascriptを使用しなければならなかったのですね＾＾；