 |
Стильные курсоры |
С помощью стилей можно переопределить вид курсора мыши и выбрать один из пятнадцати
доступных вариантов. Такая возможность, однако, поддерживается только браузером
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="mypage.htm" class="movelink">ПЕРЕМЕСТИТЕ
ЭТОТ ТЕКСТ</a>
<br>
<a href="mypage.htm" 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>
<p class="cross">На этом тексте курсор мыши примет вид
перекрестья.</p>
<br>
<span class="help">
<a href="help1.htm">СПРАВКА 1 </a><br>
<a href="help2.htm">СПРАВКА 2</a><br>
<a href="help3.htm">СПРАВКА 3</a>
</b>
</span>
</body>
</html>
|
Влад Мержевич
Рецепты HTML
|