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> <a href="#" class="a_crosshair">crosshair</a> <a href="#" class="a_default">default</a> <a href="#" class="a_help">help</a> <a href="#" class="a_eresize">e-resize</a> <a href="#" class="a_wresize">w-resize</a> <a href="#" class="a_nresize">n-resize</a> <a href="#" class="a_sresize">s-resize</a> <a href="#" class="a_neresize">ne-resize</a> <a href="#" class="a_swresize">sw-resize</a> <a href="#" class="a_seresize">se-resize</a> <a href="#" class="a_nwresize">nw-resize</a> <a href="#" class="a_move">move</a> <a href="#" class="a_pointer">pointer</a> <a href="#" class="a_text">text</a> <a href="#" class="a_wait">wait</a> </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> </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 - полезные навыки → Как задать вид курсора

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.

Код кнопки:

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