マウスのカーソルを変更する


マウスのカーソルとは以下のようなものです。
このカーソルを変更することができます。




変更する方法は適当なタグで
cursor:------; を使います。


<table style="cursor:crosshair;" width="200" height="150" border="1" bordercolor="#7799ff">
<tr><td>十字のカーソルにする</td></tr>
</table>
  ↓
十字のカーソルにする



数が多いので表にまとめます。

 style="cursor:default;"通常のカーソル
 style="cursor:crosshair;"十字のカーソル
 style="cursor:hand;"手のカーソル
 style="cursor:move;"移動中のカーソル
 style="cursor:e-resize;"横に動かすカーソル 1
 style="cursor:w-resize;"横に動かすカーソル 2
 style="cursor:n-resize;"縦に動かすカーソル 1
 style="cursor:s-resize;"縦に動かすカーソル 2
 style="cursor:ne-resize;"ななめに動かすカーソル 1
 style="cursor:nw-resize;"ななめに動かすカーソル 2
 style="cursor:se-resize;"ななめに動かすカーソル 3
 style="cursor:sw-resize;"ななめに動かすカーソル 4
 style="cursor:text;"テキストの上のカーソル
 style="cursor:wait;"待ってくれのカーソル
 style="cursor:help;"わからないよのカーソル



次は自分の用意したカーソルに変更する方法です。
これはインターネットエクスプローラ6から使えるようです。
たしか、5.5だとできなかったと思います。


cursor:url('カーソルのアドレス');

なお、カーソルの拡張子は「.cur」です。

場合によってはアイコンでもなんとかなりますが、
できることならカーソルの画像を用意したいです。


<table width="120" height="90" border="1" bordercolor="#7799ff"
 style="cursor:url('img/002.cur');">
<tr><td></td></tr>
</table>
  ↓

こういうのを作るのは苦手です。



次は スクロールバーの色を変える です。

メニューに戻ります。