マウスカーソルをカスタマイズ（画像）表示【webtoolkit.cursor.js】｜DAD UNION

webtoolkit.cursor.jsを使って、マウスカーソル自体をアニメーションgif画像に差替えてカスタムカーソルとして表示する方法をご紹介します。

Contents

マウスカーソルをカスタマイズ（画像）表示するCSSの記述
webtoolkit.cursor.jsを使って、マウスカーソル自体をアニメーションgif画像に差替えてカスタムカーソルとして表示するJavaScriptの記述
- マウスカーソルのカスタマイズ（画像）として表示するGIF画像
マウスカーソルをカスタマイズ（画像）表示するHTMLの記述
webtoolkit.cursor：カスタムカーソルを表示するデモページ
ソース元：Dynamic Drive DHTML Scripts- Custom Cusor Script II (CrossHair Mouse Cursor)

マウスカーソルをカスタマイズ（画像）表示するCSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
-->
</style>

webtoolkit.cursor.jsを使って、マウスカーソル自体をアニメーションgif画像に差替えてカスタムカーソルとして表示するJavaScriptの記述

※webtoolkit.cursor.jsファイルを読み込むだけです。

<script type="text/javascript" src="webtoolkit.cursor.js"></script>

マウスカーソルのカスタマイズ（画像）として表示するGIF画像

※ファイル名はskin.gifで設置してます。webtoolkit.cursor.jsファイル内にマウスカーソルのカスタマイズ（画像）として表示するGIF画像ファイル名「skinPath : ‘skin.gif’」の記述があります。
gif画像は「」です。

マウスカーソルをカスタマイズ（画像）表示するHTMLの記述

※必要に応じて変更して下さい。

<div id="idWrap">
    <h1>下のアニメーションgif画像をマウスカーソルとして表示します</h1>
    <div align="center"><img src="skin.gif" width="45" height="45" align="カスタムされたカーソル画像" border="0" /></div>
    
</div><!--/idWrap-->