Как сделать сайт → Уроки CSS → Как задать вид курсора

CSS - Как задать вид курсора

Задать вид курсора средствами CSS очень просто. Для этого надо определить, у каких элементов мы хотим изменить вид курсора и добавить в таблицу стилей всего одну строчку:
cursor: [вид];
Стандартных видов у курсора - 14:
  • crosshair - перекрестье
  • help - знак вопроса или воздушный шар (в зависимости от браузера)
  • e-resize, w-resize - двунаправленная горизонтальная стрелка
  • n-resize, s-resize - двунаправленная вертикальная стрелка
  • ne-resize, sw-resize - двунаправленная диагональная стрелка (с нижнего левого угла в верхний правый)
  • se-resize, nw-resize - двунаправленная диагональная стрелка (с нижнего правого угла в верхний левый)
  • move - перекрестье со стрелками на конце
  • pointer - ладошка
  • text - вертикальная линия
  • wait - песочные часы или циферблат (в зависимости от браузера)
И еще два значения:
  • auto - вид по умолчанию
  • default - вид по умолчанию на данной платформе (в основном стрелка)
Для наглядности, давайте создадим 16 ссылок и каждой определим свой вид курсора. Код html-страницы будет следующим:
<html> <head> <title>css курсор</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <a href="#" class="a_auto">auto</a><br> <a href="#" class="a_crosshair">crosshair</a><br> <a href="#" class="a_default">default</a><br> <a href="#" class="a_help">help</a><br> <a href="#" class="a_eresize">e-resize</a><br> <a href="#" class="a_wresize">w-resize</a><br> <a href="#" class="a_nresize">n-resize</a><br> <a href="#" class="a_sresize">s-resize</a><br> <a href="#" class="a_neresize">ne-resize</a><br> <a href="#" class="a_swresize">sw-resize</a><br> <a href="#" class="a_seresize">se-resize</a><br> <a href="#" class="a_nwresize">nw-resize</a><br> <a href="#" class="a_move">move</a><br> <a href="#" class="a_pointer">pointer</a><br> <a href="#" class="a_text">text</a><br> <a href="#" class="a_wait">wait</a><br> </body> </html>
На странице style.css зададим стили для этих ссылок:
a.a_auto{ cursor: auto } a.a_crosshair{ cursor: crosshair } a.a_default{ cursor: default } a.a_help{ cursor: help } a.a_eresize{ cursor: e-resize } a.a_wresize{ cursor: w-resize } a.a_nresize{ cursor: n-resize } a.a_sresize{ cursor: s-resize } a.a_neresize{ cursor: ne-resize } a.a_swresize{ cursor: sw-resize } a.a_seresize{ cursor: se-resize } a.a_nwresize{ cursor: nw-resize } a.a_move{ cursor: move } a.a_pointer{ cursor: pointer } a.a_text{ cursor: text } a.a_wait{ cursor: wait }
И посмотрим, что получилось:

css вид курсора

Курсор auto

Курсор crosshair

Курсор default

Курсор help

Курсор e-resize

Курсор w-resize

Курсор n-resize

Курсор s-resize

Курсор ne-resize

Курсор sw-resize

Курсор se-resize

Курсор nw-resize

Курсор move

Курсор pointer

Курсор text

Курсор wait
Теперь посмотрим, как можно создать свой собственный курсор. Для этого нам понадобится картинка самого курсора в форматах cur, ani или svg. Можно поискать и скачать уже готовые курсоры, а можно нарисовать самим, например, в программе ArtCursors.

Итак, идем по адресу http://www.aha-soft.com/rus/artcursors/index.htm и скачиваем пробную версию программы ArtCursors. Запускаем ее и рисуем наш будущий курсор, например, вот так:



Сохраняем его с расширением .cur. Теперь на html-странице напишем ссылку:
<html> <head> <title>css курсор</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <a href="#" class="mycursor">Пользовательский курсор</a><br> </body> </html>
А на странице style.css определим для нее вид курсора, указав адрес картинки:
a.mycursor{ cursor : url("images/mycursor.cur"), auto; }
Вот что у нас получилось:
Пользовательский курсор
Пользовательские курсоры поддерживаются не всеми браузерами, поэтому в стилях, через запятую желательно указать какой-нибудь стандартный вид курсора. В этом случае, браузер, если не сможет отобразить пользовательский курсор, будет использовать стандартный. Наш курсор, например, отображается в FireFox 3, а в IE и Opera - нет.

Кроме того, каждый вид курсора что-то означает, например, курсор wait означает занятость программы, двунаправленные стрелки обозначают возможность растянуть объект, а ладошка - ссылку. Пользователи привыкают к этим обозначениям, поэтому менять вид курсора без нужды не рекомендуется.



22.05.2010
www.site-do.ru





Главная → CSS - полезные навыки → Как задать вид курсора

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.