注目させたいリンクでカーソルを目立たせてみる (IE を考慮した cursor プロパティの使い方)

2009年11月26日 木曜日

CSS の cursor プロパティーを使ってカーソルを目立つようにしたらクリック率がかわるかもと思ったのでとりあえずサンプルを作ってみました。気になってクリックしてくれたりしないかなぁと。

• 操作確認用の demo

そのほかには、参照先のファイルタイプ別にカーソルを設定するといった使い方もできます。

• 操作確認用の demo

ただし、iPhone など、カーソルがない端末には表示されないのであくまでもオプションとして、カーソルの形状に頼りすぎることがないようにしておくのが無難です。

cursor プロパティーで画像を扱いたいときは

a.sample{
  cursor:url(/common/images/cursor01.cur);
}

のように書きます。

上記のように cursor プロパティの値にカーソルにしたいリソースの URL を指定するのですが、このとき、画像の形式は .cur または .ani になっていないと IE では表示できないので『ANIめーかー』を使って .cur 形式のファイルを用意しました。

また、cursor プロパティの値でリソースの URL を指定する時、IE では CSS ファイルからのパスではなく、HTML ファイルからのパスを指定する必要があります (IE に古くからある filter プロパティーや behavior プロパティーでのパスの指定方法と同様です)。なので、ファイル間の相対パスではなく、フルパスやルートからのパスとしておくと扱いやすいです。

cursor プロパティーで画像を使うときは IE のクセ (画像形式とパスの指定方法) を知っておくといいです。