Название раздела
С помощью стилей можно переопределить вид курсора мыши и выбрать один из
пятнадцати доступных вариантов. Такая возможность, однако, поддерживается только
браузером 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> <style
type="text/css"> .movelink { cursor: move
}
.helplink { cursor: help }</style> </head>
<body>
<b>
<a href="#" class="movelink">ПЕРЕМЕСТИТЕ ЭТОТ
ТЕКСТ</a>
<br>
<a href="#" class="helplink">СПРАВКА</a>
</b>
</body>
</html>
Если вы желаете переопределить курсор мыши для всей веб-страницы целиком,
а не только для ссылок, воспользуйтесь селектором body.
Пример 2. Изменение вида курсора мыши для всей веб-страницы
<html> <head> <style
type="text/css"> body { cursor: ne-resize
}</style> </head>
<body>
<b>
<a href="mypage.htm">ПЕРЕМЕСТИТЕ ЭТОТ
ТЕКСТ</a>
<br>
<a
href="mypage.htm">СПРАВКА</a>
</b>
</body>
</html>
Также можно задать разный вид курсора для отдельных областей веб-страницы
используя теги DIV или SPAN. В
этом случае вначале определяется класс и его стиль, а затем он применяется к
тегу, например, SPAN. Такой подход позволяет описать
стиль один единственный раз, а затем применять его в любом нужном месте.
Пример 3. Изменение вида курсора мыши для разных областей веб-страницы
<html> <head> <style
type="text/css"> .cross { cursor: crosshair }
.help
{ cursor: help }</style> </head>
<body>
<b>
<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>
</b>
</body>
</html>
Удачи!
|