Стильные курсоры

С помощью стилей можно переопределить вид курсора мыши и выбрать один из пятнадцати доступных вариантов. Такая возможность, однако, поддерживается только браузером Internet Explorer, а Netscape просто игнорирует код HTML и мы увидим обычный курсор, словно ничего лишнего и не писалось.

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

Значение
Тест
Пример
default
cursor:default
crosshair
cursor:crosshair
hand
cursor:hand
move
cursor:move
text
cursor:text
wait
cursor:wait
help
cursor:help
n-resize
cursor:n-resize
ne-resize
cursor:ne-resize
e-resize
cursor:e-resize
se-resize
cursor:se-resize
s-resize
cursor:s-resize
sw-resize
cursor:sw-resize
w-resize
cursor:w-resize
nw-resize
cursor:nw-resize

Синтаксис создания курсора очень прост. Следует определить класс и в нем использовать один из типов курсора, описанных в таблице. Ниже в примере показано, как можно переопределить вид курсора при наведении его на разные ссылки.

Пример 1. Изменение курсора мыши при наведении его на ссылку

<html>
<head>Моя страница</head>
<body>
<strong>
<div><a style="cursor: move" href="#">Переместите этот текст</a><br>
<a style="cursor: help" href="#">Справка</a></div>
</strong>
</body>
</html>

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

Пример 2. Изменение вида курсора мыши для всей веб-страницы

<html>
<head>
<style type="text/css">
body { cursor: ne-resize }
</style>
</head> <body>
<strong>
<a href="#">Переместите этот текст</a>
<br>
<a href="#">Справка</a>
</strong>
</body>
</html>

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

Пример 3. Изменение вида курсора мыши для разных областей веб-страницы

<html>
<head>
Моя страница
</head>
<body>
<p style="cursor:crosshair">На этом тексте курсор мыши примет вид перекрестья.</p>
<p><a href="#" style="cursor:help">СПРАВКА 1</a>
<a href="#" style="cursor:help">СПРАВКА 2</a>
<a href="#" style="cursor:help">СПРАВКА 3</a></p>
</body>
</html>

На этом тексте курсор мыши примет вид перекрестья.

СПРАВКА 1
СПРАВКА 2
СПРАВКА 3

Влад Мержевич

Рекомендуем почитать:
Проверка e-mail
Особенности ссылок «вверх страницы»
28 Days Later, Agency FB, American President, AnimalTracks, Archangelsk


Оставить комментарий: