Как поставить свой курсор на свой сайт? Вид курсора определяется с помощью CSS свойства cursor.
CSS-свойство cursor позволяет нам устанавливать собственный вид курсора элементам страницы, причем, можно использовать как стандартные виды курсоров, так и курсоры, определенные пользователем (файлы CUR или SVG курсоры).
CSS-свойство cursor - свойство для изменения внешнего вида курсора
Для простоты разделим курсоры на группы...
Стандартные курсоры
auto - курсор по умолчанию для текущего элемента.
crosshair - простое перекрестие (напоминающее символ "+").
default - курсор, используемый по умолчанию на данной платформе. Зачастую представляется в виде стрелки.
pointer - курсор представляется указателем, обозначающим ссылку.
move - курсор, определяющий объект, который можно переместить.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize - курсоры, обозначающие возможность перемещения некоторого края объекта.
text - курсор, обозначающий текст, который может быть выделен. Зачастую представляется в виде вертикальной линии "|".
wait - курсор, обозначающий занятость программы, и говорящий пользователю, что следует подождать. Зачастую представляется в виде циферблата или песочных часов.
help - курсор, означающий, что для объекта, на который он указывает, имеется справочная информация. Зачастую представляется в виде вопросительного знака или воздушного шара.
Пример использования:
Code
Code
SPAN.help { cursor : help; }
Курсор определенный пользователем:
Может возникнуть ситуация, когда появится необходисомть в курсоре необычного вида. Тогда следует в качестве значения свойства cursor указать:
url('путь к курсору'), стандартный курсор
Для наглядности приведу примеры:
Code
Code
P { cursor : url("my.cur"), text; }
P { cursor : url("my.svg"), url("my.cur"), auto; }
Когда браузер встречает определение пользовательского курсора, он пытается отобразить первый курсор из списка. Если первый курсор не может быть отображен, то браузер пытается задействовать следующий по списку курсор. Обратите внимание, что всегда в конце списка пользовательских курсоров указывается какой-то стандартный курсор, на тот случай, если ни один из пользовательских курсоров не сможет быть отображен. В качестве пользовательского курсора можно использовать файлы в формате CUR, ANI или SVG курсоры. SVG cursor - это платформо-независимый пользовательский курсор, где сам курсор является файлом изображения. Рекомендуется использовать PNG формат, так он поддерживает маску прозрачности через альфа-канал, но можно использовать и GIF, ибо он поддерживает 2-битную прозрачность. Если же используется другой формат изображения, который не поддерживает прозрачность ни через альфа-канал, ни через назначение отдельного цвета в качестве прозрачного, то курсор будет представлен в виде непрозрачной прямоугольной области. Следует также напомнить, что следует использовать в курсоре по меньшей мере два цвета, чтобы он был различим на различном фоне.
Пользовательские курсоры поддерживаются начиная с IE6, Firefox 1.5. Firefox 1.5 поддерживает CUR и SVG cursor-ы, при этом он не поддерживает формат ANI. IE поддерживает форматы CUR и ANI, но не понимает SVG cursor-ов.
Свойство cursor является наследуемым.
Также существует еще одно значение - inherit. Это значение говорит о том, что свойство наследуется от элемента-родителя.
Значение свойства cursor по умолчанию: auto
Хочу отдельно отметить, что не стоит увлекаться пользовательскими курсорами, их следует использовать, если на то действительно есть причина. Пользователям привычны и понятны стандартные курсоры, не забывайте об этом.
