www.kaminskiy-web.com | contact@kaminskiy-web.com
Статьи для веб-мастера - Kaminskiy-web

Главная страницаОбо мнеКонтактная информация
Статьи HTML и CSS JavaScript PHP и MySQL Раскрутка сайтов Хостинг Рейтинг украинского хостинга Анекдоты Анекдотов стрит

Свои курсоры на сайте

Автор статьи: Сергей Каминский

CSS позволяет изменять вид практически любого элемента веб-страницы, в том числе это относится и к курсорам. Вы можете изменять не только состояние курсора (переместить, подождите и т.д.), но и использовать свои собственные курсоры, которые будут динамически подгружаться браузером и отображаться при наведении на определенные вами элементы страницы. Вы можете стандартный курсор пользователя заменить на медведя летящего на воздушном шаре или на что-либо другое, соответствующее тематике вашего сайта.

Значения CSS-атрибута cursor

CSS-атрибут cursor может принимать значения, приведенные в таблице. Вы можете посмотреть на работу данного атрибута в вашем браузере, поместив курсор в соответствующей ячейке таблицы напротив значения, которое вы хотите просмотреть.

Вид CSS-код Пример Браузер
cursor: default; все
cursor: hand; IE
cursor: pointer; все
cursor: crosshair; все
cursor: text; все
cursor: wait; все
cursor: help; все
cursor: move; все
cursor: e-resize; все
cursor: w-resize; все
cursor: ne-resize; все
cursor: sw-resize; все
cursor: nw-resize; все
cursor: se-resize; все
cursor: n-resize; все
cursor: s-resize; все
cursor: progress; все
cursor: all-scroll; все
cursor: col-resize; все
cursor: no-drop; все
cursor: not-allowed; все
cursor: row-resize; все
cursor: vertical-text; все
cursor: url(/style/cursor.cur), pointer; IE, Firefox,
Google Chrome

Примеры CSS кода

Приведенный ниже код указывает браузеру, что он должен отобразить курсор со знаком вопроса при наведении на ссылку:

<a href="/help.php" style="cursor: help;">Помощь</a>

Следующий пример указывает браузеру, что он должен использовать при наведении на ссылку вместо стандартного курсора файл cursor.cur, расположенный на вашем сайте.

<a href="/link.php" style="cursor: url(/style/cursor.cur), pointer;">Ссылка</a>

Заключение

Хоть CSS и позволяет изменять вид практически любого элемента страницы, это не значит что нужно использовать какие-либо свойства всегда и везде. В том числе это относится к курсорам. Ведь пользователи привыкли видеть, например, курсор в виде руки при наведении на ссылку. Поэтому старайтесь использовать подобные возможности только если это действительно необходимо.

Другие записи по теме в разделе статьи по HTML и CSS

Копирование статьи запрещено.