Использование URL-значений для указания свойства cursor

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: [<url>,]* keyword;

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

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

cursor: url(foo.cur), url(http://www.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.

Ссылки



Много комментариев (9) к “Использование URL-значений для указания свойства cursor”

  1. kost :

    Какой простор для “ноченающих веб-дезайниров”! Теперь снежинки или телефон фирмы будут летать не за простым курсором, а за “очень красивым”. :)


  2. Баранов Андрей :

    Не без этого…

    Но можно и более конструктивно подойти к вопросу. Например, можно показать, что ссылка открывается в новом окне, выполнится JavaScript и т.п…


  3. amix :

    ничччего не понимаю: Firefox 1.5, а примеры не работают…

    Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.8) Gecko/20051111 Firefox/1.5


  4. Баранов Андрей :

    Only Windows, OS/2 and Linux (when using Gtk+ 2.4 or better) releases of Mozilla support URL values as cursors.


  5. frst :

    еще один плюс оперы


  6. Игорь :

    Firefox 1.5 for Windows – все работает.


  7. rdm :

    [b]amix[/b] Может у тебя картинки выключены?


  8. RuBo :

    Самодельный курсор работает только если он лежит вместе с хтмл-документом в одной папке. Т.е. вот такое url(http://www.example.com/bar.gif) почемуто не проходит :-/. Есть какие-нить идеи?
    ВиндоусХР, MSIE6


  9. RuBo :

    Извиняюсь, нашел ошибку и все заработало.



22 queries 0.212 seconds.