Курсори
Перш ніж змінювати вигляд курсора, вирішіть, чи буде він використовуватися відповідно. Деякі користувачі можуть бути збентежені подібними змінами, наприклад, коли замість традиційної "руки", яка з'являється під час наведення на посилання, з'являється щось інше. У більшості випадків краще залишити все як є за замовчуванням.
У табл. 1 наведені можливі варіанти курсорів. Їх вигляд може відрізнятися від кінцевого результату, це залежить від налаштувань операційної системи.
| Вид | Значення | Тест | Приклад |
|---|---|---|---|
| default | default | cursor: default | |
| crosshair | crosshair | cursor: crosshair | |
| pointer | pointer | cursor: pointer | |
| move | move | cursor: move | |
| text | text | cursor: text | |
| wait | wait | cursor: wait | |
| help | help | cursor: help | |
| n-resize | n-resize | cursor: n-resize | |
| ne-resize | ne-resize | cursor: ne-resize | |
| e-resize | e-resize | cursor: e-resize | |
| se-resize | se-resize | cursor: se-resize | |
| s-resize | s-resize | cursor: s-resize | |
| sw-resize | sw-resize | cursor: sw-resize | |
| w-resize | w-resize | cursor: w-resize | |
| nw-resize | nw-resize | cursor: nw-resize |
Синтаксис створення курсора дуже простий. Слід визначити клас і в ньому використовувати один із типів курсора, описаних у таблиці. Нижче у прикладі 1 показано, як можна змінити вигляд курсора при наведенні його на різні посилання.
Приклад 1. Зміна курсора при наведенні на посилання
<!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=utf-8">
<title>Курсори</title>
<style type="text/css">
.movelink { cursor: move; }
.helplink { cursor: help; }
</style>
</head>
<body>
<p><a href="new.html" class="movelink">ПЕРЕМІСТІТЬ ЦЕЙ ТЕКСТ</a></p>
<p><a href="new.html" class="helplink">ДОПОМОГА</a></p>
</body>
</html>Якщо ви бажаєте змінити курсор миші для всієї веб-сторінки в цілому, а не лише для посилань, скористайтеся селектором BODY (приклад 2).
Приклад 2. Зміна вигляду курсора для всієї веб-сторінки
<!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=utf-8">
<title>Курсори</title>
<style type="text/css">
body { cursor: ne-resize; }
</style>
</head>
<body>
<p><a href="new.html">ПЕРЕМІСТІТЬ ЦЕЙ ТЕКСТ</a></p>
<p><a href="new.html">ДОПОМОГА</a></p>
</body>
</html>Також можна задати різний вигляд курсора для окремих областей веб-сторінки, використовуючи теги <div> або <span>. У цьому випадку спочатку визначається клас і його стиль, а потім він застосовується до тегу, наприклад, <span>. Такий підхід дозволяє описати стиль лише один раз, а потім використовувати його в будь-якому необхідному місці (приклад 3).
Приклад 3. Курсор для різних областей веб-сторінки
<!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=utf-8">
<title>Курсори</title>
<style type="text/css">
.cross { cursor: crosshair; }
.help { cursor: help; }
</style>
</head>
<body>
<p class="cross">На цьому тексті курсор миші набуде вигляду хреста.</p>
<p><a href="1.html" class="help">ДОПОМОГА 1</a></p>
<p><a href="2.html" class="help">ДОПОМОГА 2</a></p>
<p><a href="3.html" class="help">ДОПОМОГА 3</a></p>
</body>
</html>