Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) поддерживают URL-значения для свойства cursor (CSS2 cursor property). Это дает возможность использовать в качестве указателя мышки любое изображение, любой графический файл, который может показать Gecko.

Чтобы увидеть работу всех примеров, лучше использовать Mozilla Firefox не ниже 1.5. Некоторые будут работать в MSIE, можно увидеть разницу. Opera8 не поддерживает URL-значения описываемого свойства.

Последовательно проведите указателем мышки по ссылкам. Обратите внимание, URL-значение свойства cursor различно.

cursor: url(help_i.cur), pointer;
cursor: url(help_il.cur), pointer;
cursor: url(help_im.cur), pointer;
cursor: url(help_l.cur), pointer;
cursor: url(help_m.cur), pointer;
cursor: url(help_r.cur), pointer;
cursor: url(help_rl.cur), pointer;
cursor: url(help_rm.cur), pointer;

Синтаксис

Синтаксис такой:

cursor: [,]* keyword;

Можно использовать несколько URL через запятую и одно из ключевых слов, определенных в спецификации CSS (pointer, auto и т.п.). Разумеется, URL может не быть, тогда останется только ключевое слово.

Например, можно определить курсор так:

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

Сперва будет предпринята попытка загрузить в качестве курсора файл foo.cur. Если он не доступен или не может быть использован по какой-либо причине, браузер попытается использовать bar.gif. Если и эта попытка будет неудачна, будет использовано значение auto

Поддержка CSS3 синтаксиса для значений свойств курсора была добавлена в Gecko 1.8beta3 (Deer Park Alpha 2), соответственно работает и в Firefox 1.5. Таким образом появилась возможность указания координат области курсора, в рамках которой размещено изображение курсора. Если координаты не указывать, они будут прочитаны из файла (для *.CUR и *.XBM) или это будут координаты верхнего левого угла изображения. Пример CSS3 синтаксиса:

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

Первое число: X-координата; второе: Y-координата. Таким образом, область курсора будет смещена на 4px влево и 12px вверх относительно верхнего левого угла.

cursor: url(help_rl.cur) 35 35, pointer;... ...cursor: url(help_rl.cur), pointer;
.......... ..........

В этом примере поочередно подводите указатель мыши к окрашенным областям снизу-вверх. Для синей указаны координаты для смещения области курсора: X=35px, Y=35px. Эти значения ощутимо смещают курсор влево и вверх. Если смещения не происходит - ваш браузер еще не поддерживает это.

Ограничения

?спользовать можно все поддерживаемые Gecko графические форматы. Это может быть: BMP, JPG, CUR, GIF и пр. Однако, ANI не поддерживается. Анимированный GIF тоже не может быть анимированным курсором. В будущих релизах эти ограничения скорее всего будут сняты.

Gecko не ограничивает размеры курсора. Однако, следует все-таки ограничиться размером 32x32 для обеспечения максимальной совместимости с операционными системами и платформами. Ну и конечно, курсор больше указанного размера не будет работать в Windows 9x (95, 98, ME).

Полупрозрачные курсоры не поддерживаются в версиях Windows младше XP. Это ограничение операционной системы. С прозрачными курсорами такой проблемы нет.

Здесь используются файлы JPG, GIF и PNG:

cursor: url(cursor.jpg), pointer;
изображение JPG в качестве курсора
cursor: url(cursor.gif), pointer;
прозрачный GIF в качестве курсора
cursor: url(cursor.png), pointer;
частично прозрачный PNG в качестве курсора

Другие браузеры

MS Internet Explorer тоже поддерживает URL-значения свойства cursor. Однако, в нем реализована поддержка только форматов CUR и ANI. Но он менее требователен к синтаксису описания свойства. Например такое:

cursor: url(foo.cur);

или такое написание:

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

будет работать в MSIE, но не в Gecko. Для совместимости с Gecko следует придерживаться CSS-спецификации. Т.е. сперва указывать (или вовсе не указывать) один или несколько URL, а в конце указывать лишь одно ключевое слово, определенное спецификацией для значений свойств cursor.

Ссылки

• Оригинал на английском: Using URL values for the cursor property
• CSS2.1: Cursors: the 'cursor' property
• CSS3 'cursor' property