-=:
Тех. поддержка =-
|
-=: Warning :=- |
©
Copyright Алекс aka TrigGer &
x-graphic studio © Все права защищены. |
![]() |
Интернет раскрутка: с чего начинать?
Советы
по созданию и раскрутке сайта
Хитрости
оформления HTML страниц - правильный выбор цвета
Для
чего нужны формы
Как установить Windows по телефону
Мой
диалог с Windows
Мужчина-прграммист
(краткое приложение по использованию
Диалог
у монитора
Динамическое определение разрешения монитора
Такие
разные ссылки
Стильные
курсоры
Оптимизируем
таблицы
-= Стильные курсоры =-
Автор:
Влад Мержевич
Источник: Рецепты HTML
С помощью стилей можно переопределить вид курсора мыши и выбрать один из
пятнадцати доступных вариантов. Такая возможность, однако, поддерживается
только браузером 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>