スタイルシートの技
指定した部分の上にマウスが乗った時のカーソルを変更したい (Internet Explorer 4.0~)
リンクにカーソルが乗った時や、画像上にカーソルが移動した時とかにカーソルを変更する事ができます。 Internet Explorer 4.0以上の機能ですが、最近のNetscape NavigatorやOperaでも動作するそうです。 カーソルには基本15種類存在します。その多くはみなさんが良く見ているカーソルだと思います。 カーソルをスタイルシートで指定するには、以下のように記述します。
cursor: [カーソル種類];
下のボックス内にカーソルを持って行って見てください。ブラウザが対応しているのであればカーソルが切り替わるはずです。 一番下(三段目)の背景色が薄黄色のカーソルはInternet Explorer 6.0で対応したカーソルです。 スタイルシートで適応する場合には、英語部分がカーソル種類となります。
default デフォルト |
hand 指先 |
crosshair 十字 |
move 移動 |
e-resize 右矢印 |
ne-resize 右上矢印 |
n-resize 上矢印 |
nw-resize 左上矢印 |
w-resize 左矢印 |
sw-resize 左下矢印 |
s-resize 下矢印 |
se-resize 右下矢印 |
text テキスト |
wait 待機 |
help ヘルプ |
|
pointer 指先 |
no-drop 指先禁止 |
vertical-text I-水平版 |
colsize 横幅調整 |
progress 処理進行 |
not-allowe 禁止 |
all-scroll スクロール |
row-resize 縦幅調整 |
また、「Internet Explorer 6.0」では自作のカーソルを使う事もできるようになっており、 「*.cur」「*.ani」形式のものに対応してます。例えば「mycursor.cur」というカーソルがあれば、
*.mycursor
{
cursor: url('mycursor.cur') ;
}
このように背景画像などと同じ指定の方法で自作、またはネット上で 公開されているカーソルなどを利用する事も可能です。