cursor のプロパティーに URL 値を使用する

 

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) では、CSS2 cursor プロパティー で URL 値が使用できます。これにより、自由な画像 — Gecko がサポートする画像形式なら — がマウスカーソルとして利用できます。

構文

このプロパティーの記述方式は以下のようになります。

cursor: [<url>,]* keyword;

これは、カンマ区切りのゼロ個以上の URL が指定可能で、その後ろに CSS 規格で定義されている autopointer といったキーワードを一つ指定する必要があります。

たとえば、以下のような指定は可能です :

cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;

この場合、最初に foo.cur を読み込もうとします。もし、存在しないかその他の理由により利用できない場合、bar.gif を試しますが、両方利用できない場合は auto が利用されます。

cursor 値での CSS3 書式 のサポートが Gecko 1.8beta3 で付け加えられました。(そのため、Firefox 1.5 でも動作します) このことにより、カーソルのホットスポットの座標を指定できるようになります。もし、指定されていなければ、ホットスポットの座標はファイルそのもの (CUR もしくは XBM ファイル) か、画像の左上端に設定されます。CSS3 における書式のサンプルは

cursor: url(foo.png) 4 12, auto;

となります。

最初の値が x 座標、二つ目の値が y 座標になります。サンプルではホットスポットが、左上端 (0,0) に対して (4,12) のピクセルに設定されます。

制限事項

Gecko でサポートされているすべての画像形式が利用可能です。これは、BMP、JPG、CUR、GIF などが利用できることを意味します。しかしながら、ANI はサポートされていません。また、アニメーション GIF を指定した場合でも、カーソルはアニメーションを行いません。この制限は、将来のリリースで除かれる可能性があります。

Gecko それ自体には、カーソルサイズの制限はありません。しかしながら、OS やプラットフォームの互換性のために、最大サイズを 32x32 にするのがよいでしょう。特に、このサイズより大きなカーソルは、Windows 9x (95, 98, Me) では動作しません。

半透明カーソルは、Windows XP より前ではサポートされていません。これは、OS の制限です。透明度はすべてのプラットフォームで動作します。

Windows、OS/2 と Linux (GTK+ 2.4 以上の場合) での Mozilla リリースでのみ、カーソルにURL 値が利用できます。その他のプラットフォームでのサポートは、将来のリリースで加えられる予定です。(Mac OS: バグ 286304, QNX Neutrino: バグ 286307, XLib: バグ 286309, Qt: バグ 286310, BeOS: バグ 298184, GTK 2.0/2.2: バグ 308536)

ほかのブラウザとの互換性

Microsoft Internet Explorer でも cursor プロパティーに URL 値を利用できます。しかしながら、CUR と ANI フォーマットのみをサポートしています。

また、cursor プロパティーの書式の制限もゆるいです。これは、

cursor: url(foo.cur);

または:

cursor: url(foo.cur), pointer, url(bar.cur), auto;

なども、MSIE では動作することを意味しますが、Geckoブラウザでは動作しません。Gecko との互換性と CSS 規格との整合性からも、URI リストを最初に、最後にキーワード値を一つ入れるべきです。

To-do: MSIE が CSS3 ホットスポット座標について行うことについて記述
 

ドキュメントのタグと貢献者

 このページの貢献者: teoli, Marsf, Mgjbot, Okome, Takenbot, Taken Bot, Shimono, DaViD83
 最終更新者: teoli,