Курсор, или указатель мыши, при просмотре сайтов в интернете обычно имеет вид стрелки, а при наведении на гиперссылки принимает вид руки-указателя. Между тем, в HTML предусмотрено большое разнообразие изображений курсора и их грамотное применение может быть весьма полезно веб-дизайнерам. Простыми средствами с помощью стилей можно переопределить вид курсора и выбрать один из более десяти доступных вариантов.
Конечно, не стоит изощряться и изменять вид курсора, демонстрируя своё умение применять стили CSS. Этим вы никого не удивите, а пользователя можете ввести в заблуждение. Всё хорошо в меру, поэтому посмотрим, когда же изменение вида курсора может быть оправдано.
Ниже приведены варианты курсоров, которые можно задать с помощью стилей. Надо заметить, что их конкретный вид может несколько отличаться в зависимости от настроек указателя мыши на вашем компьютере. Так как нас интересует не техническая, а так сказать, творческая сторона дела, то, не мудрствуя лукаво, будем для наглядности задавать стиль для каждого элемента списка "в лоб" с помощью обычной конструкции: <li style="cursor:тип курсора"><strong>Курсор №</strong></li>.
Красным цветом выделена переменная, определяющая тип курсора. Для просмотра просто наведите указатель на соответствующую строчку. Естественно, никто не мешает вам выносить стилевые правила в заголовок HTML документа внутрь тега <head></head> или в отдельный файл стилей CSSи задавать вид курсора с помощью классов и идентификаторов
Курсор 1 - cursor:auto
Курсор 2 - cursor:crosshair (крест)
Курсор 3 - cursor:default
Курсор 4 - cursor:e-resize ("направление на восток")
Курсор 5 - cursor:help (помощь)
Курсор 6 - cursor:inherit
Курсор 7 - cursor:move (движение)
Курсор 8 - cursor:ne-resize ("направление на северо-восток")
Курсор 9 - cursor:n-resize ("направление на север". Далее все обозначения направлений resizeкурсоров аналогично, то есть от английских частей света: north - east - south - west)
Курсор 10 - cursor:nw-resize
Курсор 11 - cursor:pointer (указатель)
Курсор 12 - cursor:se-resize
Курсор 13 - cursor:s-resize
Курсор 14 - cursor:sw-resize
Курсор 15 - cursor:text (текст)
Курсор 16 - cursor:wait (ожидание)
Курсор 17 - cursor:w-resize
Само по себе применение различных курсоров вряд ли оправдано, но в сочетании с всплывающей подсказкой оно становится интересным. Напомню, что подсказка создаётся с помощью атрибута titleво многих элементах страницы: абзац, заголовок, столбец таблицы, изображение и др. С помощью подсказки вы можете конкретизировать какие-либо дополнительные параметры товаров в прайс-листах, выводить указания для "чайников" и другую служебную информацию. Для примера, приведу использование в прайс-листе курсора help (помощь):
1. Колбаса вареная любительская - цена 100 руб.
2. Рояль концертный белый
HTML-код второго из приведенных примеров следующий: <p style="cursor:help" title="Доставка - не наши проблемы, а покупателя!">2. Рояль концертный белый</p>
Иногда из соображений удобства навигации по странице сайта желательно не менять вид курсора при наведении его на текст. В некоторых браузерах по умолчанию курсор при наведении на текст меняет вид стрелки на вертикальную черту с засечками (стиль курсора - "cursor:text"). При этом, на мой взгляд, он плохо виден и приходится дергать мышку, чтобы найти его. В этом случае можно принудительно задать вид указателя в виде стрелки с помощью стиля, но удобнее использовать тег<label> </label>, заключив в него При таком указателе мыши, опять же, на мой взгляд, удобнее выделять текст движением мыши.
Словом, твори, выдумывай, пробуй, и такой привычно-незаметный, но постоянно присутствующий элемент, как указатель мыши, может стать творческим элементом дизайна!
