Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию. В табл. 1 приведены возможные варианты курсоров. Их вид может отличаться от конечного результата, это зависит от настроек операционной системы.
Примеры вы можете просмотреть пройдя по данной ссылке.
Синтаксис создания курсора очень прост. Следует определить класс и в нем использовать один из типов курсора, описанных в таблице. Ниже в примере 1 показано, как можно переопределить вид курсора при наведении его на разные ссылки.
Code
<!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=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).
Code
<!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=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).
Code
<!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=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>
Автор:Влад Мержевич
Источник: www.htmlbook.ru
Главная 
