スクリプトメモ » HTML/CSS
2006年02月14日
マウスカーソルの指定方法

マウスカーソルの指定方法と、種類一覧。
マウスカーソルはスタイルシートでcursor:auto;などで指定するだけで、ブラウザが対応していればその指定したカーソルが表示されます。
対応していない場合の代替カーソルとして、2つ目、3つ目を指定出来ますがOperaは1つ目しか認識してくれません。(対応していない指定が1つ目にあれば、2つ目以降の指定を無視してautoが使われます)

url()を指定することで、独自の画像を指定することが出来ます。
画像のファイルに指定出来るのは、
Win IE:cur
Win Gecko:cur, gif, jpg, png
が対応していて、それ以外のブラウザ(Macの主要なブラウザ全て、およびOpera)は未対応です。
Safari1.2以上は未確認です。

<img src="hoge.jpg" alt="hoge" style="cursor:auto">
<img src="hoge.jpg" alt="hoge" style="cursor:url(hoge.png), url(hoge.cur), crosshair">

指定WindowsMacintoshサンプル
autoauto_wauto_mcursor:auto
カーソルの位置にあるコンテンツに依存
crosshaircrosshair_wcrosshair_mcursor:crosshair
十字カーソル
defaultdefault_wdefault_mcursor:default
コンテンツに関係なくデフォルトカーソルが使用されます。通常は矢印です。
pointerpointer_wpointer_mcursor:pointer
リンクに使われるポインターカーソル
movemove_wmove_mcursor:move
ドラッグなどに使われるカーソル
e-resizee-resize_we-resize_mcursor:e-resize
ne-resizene-resize_wne-resize_mcursor:ne-resize
nw-resizenw-resize_wnw-resize_mcursor:nw-resize
n-resizen-resize_wn-resize_mcursor:n-resize
se-resizese-resize_wse-resize_mcursor:se-resize
sw-resizesw-resize_wsw-resize_mcursor:sw-resize
s-resizes-resize_ws-resize_mcursor:s-resize
w-resizew-resize_ww-resize_mcursor:w-resize
リサイズカーソル
texttext_wtext_mcursor:text
テキストカーソル。通常はアイビーム(I-beam)が使われます。
waitwait_wwait_mcursor:wait
待機カーソル。
progressprogress_wprogress_mcursor:progress
進行中カーソル。アプリケーションが処理を終了するのを待たずに操作出来るという意味があります。
helphelp_whelp_mcursor:help
ヘルプカーソル
url(xxx.cur)cur_wcursor:url(imagecur.cur), help
画像カーソル(cur、ico)は、WinIE、WinFF、WinMZ、WinNCのみ対応しています。
画像カーソルに対応していなければ、helpカーソルが表示されます。
url(xxx.gif)gif_wcursor:url(imagegif.gif), url(imagecur.cur), help
画像カーソル(gif、jpg、png)は、WinFF、WinMZ、WinNCのみ対応しています。
gif画像カーソルに対応していなければ、curカーソルが、gif、curともに対応していなければhelpカーソルが表示されます。
url(xxx.svg#id)help_wcursor:url(svgcur.svg#linkcursor), help
SVGカーソル。SVGで記述されています。
SVGカーソルに対応していなければ、helpカーソルが表示されます。

SVGファイルのmimeタイプはimage/svg+xmlです。
imageとなっているとおり、画像を意味するファイルですが、内容はテキストファイルで、表示する形式などをXMLで表しています。
一般的なDTDは
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

W3C Working Draft(18 User interface) ... 18.1 Cursors: the 'cursor' property

Wicker Wings