画像を選択した時のカーソル変更

2009/02/19 15:53

このQ&Aのポイント

スポットエリアを利用して画像の一部を選択した時に、マウスポインタを変更する方法はありますか？
マウスポインタを変える方法として、<area>タグを使用してスポットエリアを作成し、ホバー時にカーソルの形を変えるように指定することができます。
しかし、<area>タグではカーソル形状の指定ができないため、JavaScriptやCSSを使用してマウスポインタを変更する必要があります。

hukazuo
お礼率82% (188/228)

HTML
回答数1
ありがとう数1

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

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

ベストアンサー

Splatter
ベストアンサー率41% (181/440)

2009/02/19 17:11 回答No.1

即興ですがサンプルを作成してみました。 --------------------------------------------------------- <html> <head> <script langage="javascript">  </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()ではマウスカーソルを標準に変更します。参考になれば。

質問者