Курсоры
С помощью стилей можно переопределить вид курсора мыши и выбрать один из
пятнадцати доступных вариантов.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а
будет ли он использоваться к месту. Многих пользователей подобные изменения
могут ввести в заблуждение, когда, например, вместо традиционной «руки»,
появляющейся при наведении на ссылку, возникает нечто другое. В большинстве
случаев, лучше оставить все по умолчанию.
В табл. 1 приведены возможные варианты курсоров. Их вид может отличаться от
конечного результата, это зависит от настроек операционной системы.
Синтаксис создания курсора очень прост. Следует определить класс и в нем
использовать один из типов курсора, описанных в таблице. Ниже в примере 1
показано, как можно переопределить вид курсора при наведении его на разные
ссылки.
| Пример 1. Изменение курсора при наведении его на
ссылку |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
.movelink { cursor: move
}
.helplink { cursor: help }
</style>
</head>
<body>
<a href="mypage.htm" class="movelink">ПЕРЕМЕСТИТЕ ЭТОТ
ТЕКСТ</a>
<br>
<a href="mypage.htm" class="helplink">СПРАВКА</a>
</body>
</html> |
Результат данного примера показан ниже.
Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а
не только для ссылок, воспользуйтесь селектором BODY (пример 2).
Пример 2. Изменение вида курсора для всей веб-страницы |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
body { cursor: ne-resize
}
</style>
</head>
<body>
<a
href="mypage.htm">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a>
<br>
<a
href="mypage.htm">СПРАВКА</a>
</body>
</html> |
Также можно задать разный вид курсора для отдельных областей веб-страницы
используя теги <DIV> или <SPAN>. В этом случае вначале определяется класс и его
стиль, а затем он применяется к тегу, например, <SPAN>. Такой подход позволяет описать стиль один
единственный раз, а затем применять его в любом нужном месте (пример 3).
| Пример 3. Курсор для разных областей веб-страницы |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
.cross { cursor: crosshair }
.help
{ cursor: help }
</style>
</head>
<body>
<span class="cross">На
этом тексте курсор мыши примет вид
перекрестья.</span>
<br>
<a href="help1.htm"
class="help">СПРАВКА 1</a><br>
<a href="help2.htm"
class="help">СПРАВКА 2</a><br>
<a href="help3.htm"
class="help">СПРАВКА 3</a>
</body>
</html> |
Результат данного примера показан ниже.
|
