JavaScript

マウスカーソルをカスタマイズ(画像)表示する方法【webtoolkit.cursor.js】

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

マウスカーソルをカスタマイズ(画像)表示する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-->

webtoolkit.cursor:カスタムカーソルを表示するデモページ

webtoolkit.cursor:カスタムカーソルを表示するデモページ

ソース元:Dynamic Drive DHTML Scripts- Custom Cusor Script II (CrossHair Mouse Cursor)

ソース元:Dynamic Drive DHTML Scripts- Custom Cusor Script II (CrossHair Mouse Cursor)

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。