| 解 説 |
マウスポインタ形状を任意の形状にするにはカーソル形状を作成するソフトなどを利用します。（続ホームページ裏ワザ大全 HTML&TRICKS 参照） この時に透明カーソルを作成します。透明カーソルをstyle="cursor:url(trans.cur)"としてbodyタグに適用します。カーソルが透明なので、このカーソルに任意の画像を追従させるようにすれば任意の画像の任意のサイズのカーソル画像を利用できる事になります。クリックやドラッグなどは問題なく行えます。
|
| コード |
<![CDATA[
<html>
<head>
<title>マウスポインタ形状を任意の形状にする</title>
<script language="JavaScript">
<!--
function setCSR(){
myCSR.style.top = event.y;
myCSR.style.left= event.x;
}
// -->
</script>
</head>
<body style="cursor:url(trans.cur)" onmousemove="setCSR()">
マウスポインタ形状を任意の形状にする<br>
<img src="csr.gif" id="myCSR" style="position:absolute;left:0px;top:0px;">
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
マウスポインタ形状を任意の形状にする