オンマウスでポインタの形をかえる
表示の例
テストページ1へ
テストページ2へ
テストページ3へ
リンク文字にマウスポインタをのせた時に、標準タイプとはちがう形にかわります。
ソースは下のようになります。
HTMLソースのHEAD区間に貼り付けましょう。
(必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください)
ソース
<STYLE type="text/css">
<!--
A:link {text-decoration:none;}
A:visited {text-decoration:none;}
A:active {text-decoration:none;}
A:hover {color:#FF0000; text-decoration:underline; cursor:e-resize}
-->
</STYLE>
A:hover {color:#FF0000; text-decoration:underline; cursor:e-resize} のところで、マウスポインタの形を指定しています。cursor:e-resize の e-resize をお好みの形にかえてください。
マウスポインタの形は、下の表を参考にあなたの好きな形にかえてみてください。
文字にマウスポインタをのせるとその形にかわります
e-resize se-resize s-resize sw-resize w-resize nw-resize n-resize
ne-resize help move wait text crosshair hand
ページ上のマウスポインタの形をいつもかえる場合は、下のソースのようにします。
HTMLソースのHEAD区間に貼り付けましょう。
ソース
<STYLE type="text/css">
<!--
A:link {text-decoration:none;}
A:visited {text-decoration:none;}
A:active {text-decoration:none;}
A:hover {color:#FF0000; text-decoration:underline; cursor:e-resize}
body {cursor:crosshair}
-->
</STYLE>
body {cursor:crosshair} のところで指定しています。
ある文字にのせた時だけ形をかえる場合には、下のソースのようにしてください。
文字を表示させたい場所のHTMLソースに貼り付けましょう。
マウスをのせてください
ソース
<span style="cursor:move">マウスをのせてください</span>
style="cursor:move" のところで指定しています。
ホームページお役立ち小技集のTOPへ