CSSのcursorでオリジナルのマウスカーソルを使うこともあると思うんだが、これって、CSS3だとホットスポットを設定できるようになったんだね・・。
ホットスポットとは、クリックしたときの基準点になる部分なんだけど、
普通のマウスカーソルならカーソルの一番左上がホットスポットだし、テキストカーソルなら中心がホットスポットになる。これは日頃の感覚で知っていると思う。
curファイルを作れるソフトでは、ホットスポットを指定できたりするけど、pngとか普通の画像をオリジナルのマウスカーソルとして使おうとすると、ホットスポットが左上固定になってしまって困るよね。
そこでcss3ですよ、奥さん!
ホットスポット指定は簡単。
以下のように画像を指定した後にx座標y座標を設定するだけ!
基点(0, 0)は画像の左上です。
#selector{
cursor: url(cursor.png) 3 5, auto;
}
この場合、url画像の左上を原点とした(3, 5)の座標がホットスポットになる。
この指定の仕方をするまでは、いちいち座標計算して位置をごまかしてたわ・・。
CSS3だし、IEでは動作どうなるんだろう。
まぁIEはいっか。