CSS、JavaScriptで、「でっかいカーソル」

質問

WEBページにてマウスカーソルを80×80pxくらいの画像にしたいと思っております。
CSSのマウスカーソル変更を調べたところ、cursorで指定できる.curファイルは、なにやらサイズが32x32までの大きさとのこと。

他の方法(JavaScriptなど）で、マウスカーソルを指定の画像に変えることができる方法はありませんでしょうか。

#ジャストアイデアとして、1ドットのcurファイルを作り、そのマウスカーソルにJavascriptで画像をぴったり追従させることも考えていますが（未検証）、よりスマートな方法はないかと思案中です。

よろしくお願いします。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

cssの制限ではなく、.curというファイルフォーマットが32px四方しか対応していないからです。

> #ジャストアイデアとして、1ドットのcurファイルを作り、
「32x32まで」ではなく、「32x32のみ」ですので、1px四方のカーソルは作れません。
32x32pxでも全面を透明にすれば、見えなくなりますが。
JavaScriptを切ればカーソルが見えなくなります（追従画像がなくなるため）ので、その調整も必要だと思います。

JavaScriptによる画像の追従や、カーソルの変更そのものが、どちらかというと嫌われる方法です。
おそらく「デザインだけを考えて使いにくくなるようなカーソルの変更」をしているサイトが多いためでしょう。

で、本題です。

CSS2.1では.svgフォーマットも利用可能としていますが、対応しているブラウザが少ないと思います。

一部のブラウザは（ブラウザ独自機能として）pngやgifにも対応していますので、
pngやgifなどを指定すれば、（対応ブラウザに限り）どんなサイズでもカーソルに指定できます。

a{
cursor: url(cursor.svg#anchor), url(cursor.png), url(cursor.cur), pointer;
}

お礼

お返事おそくなりましてすみません。ご回答ありがとうございました。
検証したところ、スタイルシートでのpngファイル指定がIEのみで出来なかったので、Javascriptでブラウザ判別してIEのみJavascriptでの追従パターンで対応することにしました。ありがとうございました。