Курсоры
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию.
В табл. 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. Изменение курсора при наведении его на ссылку
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Курсоры</title>
<style type="text/css">
.movelink { cursor: move; }
.helplink { cursor: help; }
</style>
</head><body>
<p><a href="mypage.htm" class="movelink">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
<p><a href="mypage.htm" class="helplink">СПРАВКА</a></p>
</body>
</html>
Результат данного примера показан ниже.
Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).
Пример 2. Изменение вида курсора для всей веб-страницы
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Курсоры</title>
<style type="text/css">
body { cursor: ne-resize; }
</style>
</head>
<body>
<p><a href="mypage.htm">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
<p><a href="mypage.htm">СПРАВКА</a></p>
</body>
</html>
Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги <DIV> или <SPAN>. В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, <SPAN>. Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).
Пример 3. Курсор для разных областей веб-страницы
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Курсоры</title>
<style type="text/css">
.cross { cursor: crosshair; }
.help { cursor: help; }
</style>
</head>
<body>
<p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
<p><a href="help1.htm" class="help">СПРАВКА 1</a></p>
<p><a href="help2.htm" class="help">СПРАВКА 2</a></p>
<p><a href="help3.htm" class="help">СПРАВКА 3</a></p>
</body>
</html>
Результат данного примера показан ниже.
| Статья опубликована: 13.09.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
ХоРоШо
23.04.2007
Влад Мержевич
24.04.2007
Gadge+
25.09.2007
<span class="A">нужный объект</span>
^^^^^^^^^
Роман
21.02.2008
Стефан
23.03.2008
Hydra
01.05.2008
Kak sdelat chtobi etot kursor bil ne tolko na body a eshe i na vseh ssilkah i poliah dlia teksta ?
Zaranee spasibo
nomad
21.05.2008
Работает только в IE
Как сделать в Opera, Mozilla?
nomad
21.05.2008
A {cursor: url('путь к файлу с курсором'), auto} - работает
В Opera, кажется, не поддерживаются свои курсоры.
m6a6g6
02.06.2008
dima
16.06.2008