マウスカーソルの指定方法と、種類一覧。
マウスカーソルはスタイルシートで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">
指定 | Windows | Macintosh | サンプル |
---|---|---|---|
auto | cursor:auto | ||
カーソルの位置にあるコンテンツに依存 | |||
crosshair | cursor:crosshair | ||
十字カーソル | |||
default | cursor:default | ||
コンテンツに関係なくデフォルトカーソルが使用されます。通常は矢印です。 | |||
pointer | cursor:pointer | ||
リンクに使われるポインターカーソル | |||
move | cursor:move | ||
ドラッグなどに使われるカーソル | |||
e-resize | cursor:e-resize | ||
ne-resize | cursor:ne-resize | ||
nw-resize | cursor:nw-resize | ||
n-resize | cursor:n-resize | ||
se-resize | cursor:se-resize | ||
sw-resize | cursor:sw-resize | ||
s-resize | cursor:s-resize | ||
w-resize | cursor:w-resize | ||
リサイズカーソル | |||
text | cursor:text | ||
テキストカーソル。通常はアイビーム(I-beam)が使われます。 | |||
wait | cursor:wait | ||
待機カーソル。 | |||
progress | cursor:progress | ||
進行中カーソル。アプリケーションが処理を終了するのを待たずに操作出来るという意味があります。 | |||
help | cursor:help | ||
ヘルプカーソル | |||
url(xxx.cur) | cursor:url(imagecur.cur), help | ||
画像カーソル(cur、ico)は、WinIE、WinFF、WinMZ、WinNCのみ対応しています。 画像カーソルに対応していなければ、helpカーソルが表示されます。 | |||
url(xxx.gif) | cursor:url(imagegif.gif), url(imagecur.cur), help | ||
画像カーソル(gif、jpg、png)は、WinFF、WinMZ、WinNCのみ対応しています。 gif画像カーソルに対応していなければ、curカーソルが、gif、curともに対応していなければhelpカーソルが表示されます。 | |||
url(xxx.svg#id) | cursor: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