Курсоры
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию.
В табл. 1 приведены возможные варианты курсоров. Их вид может отличаться от конечного результата, это зависит от настроек операционной системы.
| Вид | Значение | Тест | Пример |
|---|---|---|---|
|
default | cursor: default | |
|
crosshair | cursor: crosshair | |
|
pointer | cursor: pointer | |
|
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 показано, как можно переопределить вид курсора при наведении его на разные ссылки.
Пример 1. Изменение курсора при наведении его на ссылку
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Курсоры</title>
<style type="text/css">
.movelink { cursor: move; }
.helplink { cursor: help; }
</style>
</head>
<body>
<p><a href="new.html" class="movelink">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
<p><a href="new.html" class="helplink">СПРАВКА</a></p>
</body>
</html>Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).
Пример 2. Изменение вида курсора для всей веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Курсоры</title>
<style type="text/css">
body { cursor: ne-resize; }
</style>
</head>
<body>
<p><a href="new.html">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
<p><a href="new.html">СПРАВКА</a></p>
</body>
</html>Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги <div> или <span>. В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, <span>. Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).
Пример 3. Курсор для разных областей веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Курсоры</title>
<style type="text/css">
.cross { cursor: crosshair; }
.help { cursor: help; }
</style>
</head>
<body>
<p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
<p><a href="1.html" class="help">СПРАВКА 1</a></p>
<p><a href="2.html" class="help">СПРАВКА 2</a></p>
<p><a href="3.html" class="help">СПРАВКА 3</a></p>
</body>
</html>