Mozilla.com

  1. MDC
  2. 首页
  3. Using URL values for the cursor property

Using URL values for the cursor property

  

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supports URL values for the CSS2 cursor property. This allows specifying arbitrary images as mouse cursors — any image format supported by Gecko can be used.

Syntax(语法)

The syntax for this property is:

cursor: [<url>,]* keyword;

This means that zero or more URLs may be specified (comma-separated), which must be followed by one of the keywords defined in the CSS specification, such as auto or pointer.

例如,下面所示的值将被允许:

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

This will first try loading foo.cur. If that file does not exist or is not valid for some other reason, bar.gif is tried, and if that can't be used either, auto will be used.

Support for the CSS3 syntax for cursor values got added in Gecko 1.8beta3; it therefore works in Firefox 1.5. It allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image. An example of the CSS3 syntax is:

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

The first number is the x-coordinate, and the second number is the y-coordinate. The example will set the hotspot to be the pixel at (4,12) from the top left (0,0).

Limitations

All image formats supported by Gecko can be used. This means that you can use BMP, JPG, CUR, GIF, etc. images. However, ANI is not supported. And even if you specify an animated GIF, the cursor will not be an animated cursor. This limitation may be removed in future releases.

Gecko itself does not place a limitation on the size of the cursor. However, you should limit yourself to the size 32x32 for maximum compatibility with operating systems and platforms. Especially, cursors larger than this size will not work on Windows 9x (95, 98, ME).

Translucent cursors are not supported on Windows releases earlier than XP. This is a limitation of the operating system. Transparency works on all platforms.

Only Windows, OS/2 and Linux (when using GTK+ 2.4 or better) releases of Mozilla support URL values as cursors. Support for other platforms may be added in future releases (Mac OS: bug 286304 , QNX Neutrino: bug 286307 , XLib: bug 286309 , Qt: bug 286310 , BeOS: bug 298184 , GTK 2.0/2.2: bug 308536 )

Compatibility with other browsers

Microsoft Internet Explorer also supported URI values for the cursor property. However, it only supports CUR and ANI as formats.

It is also less strict in the syntax for the cursor property. This means that a value such as:

cursor: url(foo.cur);

或:

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

will work in MSIE, but will not work in Gecko browsers. For compatibility with Gecko and in accordance with the CSS specification, always put the list of URIs first, and use exactly one keyword value at the end.

To-do: document what MSIE does with CSS 3 hotspot locations

Page last modified 15:17, 31 Aug 2008 by Y001

文件 (0)