Журнал WEB Star - kovrik.hut.ru - web-дизайн, photoshop, flash, анекдоты и юмор
X-GRAPHIC STUDIO - ЗАКАЖИ СЕБЕ САЙТ
-=: Журнал 
 WEB Star # 4 - журнал для web-мастеров :=- -=: WEB фокусы :=-
-=: Тех. поддержка =- 
 -=: Warning :=-
© Copyright Алекс aka TrigGer & x-graphic studio
© Все права защищены.
Перепечатка материалов разрешается, только после письменного разрешения автора (e-mail). При перепечатке любого материала с журнала видимая ссылка на источник www.kovrik.hut.ru и все имена, ссылки авторов обязательны.

Главная
Авторам
Сотрудничество
Ссылки

Интернет раскрутка: с чего начинать?
Советы по созданию и раскрутке сайта
Хитрости оформления HTML страниц - правильный выбор цвета
Для чего нужны формы

Создаем водяную поверхность
Aqua кнопка
Шестеренка
Создание панели (меню)

Как установить Windows по телефону
Мой диалог с Windows
Мужчина-прграммист (краткое приложение по использованию
Диалог у монитора

Пишем новости
Жемчужина PERL: мощь C++ и простота Basic
Работа с шаблонами
Голосование на PHP

Оптимизация Windows XP
Дни Великой Перестройки

Динамическое определение разрешения монитора
Такие разные ссылки
Стильные курсоры
Оптимизируем таблицы

-= Стильные курсоры =-

Автор: Влад Мержевич
Источник: Рецепты 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>