Приветствую всех читателей и подписчиков моего блога. Сегодняшняя публикация посвящена небольшому разделу, связанному с указанием стилевых правил css cursor-а. Наверное каждый из вас замечал, как на некоторых сервисах курсор мишки видоизменяется или принимает другую форму на некоторых объектах веб-страницы. Вот это я с вами и разберу.
Я расскажу с помощью каких средств можно управлять курсором, какие браузеры поддерживают такие изменения, а также, как обычно, приведу примеры. А теперь за дело!
Детские капризы
Однажды я наблюдал за смешной картиной, когда дети узнали, что стандартный курсор можно менять на любой другой. После этого дня по экрану компьютера «скакали» анимированные лошади, передвигались крутящиеся стрелки и «бегали» мультяшные герои…
Конечно в веб-разработке никто до таких крайностей не доходит, но все-таки встречаются и такие веб-приложения, в которых разнообразие указателей несколько превышено.
Я все это веду к тому, что прежде чем решиться установить видоизмененный курсор в своем веб-ресурсе, подумайте, а будет ли он там уместен. Также стоит задуматься о дизайне указателя, ведь неверно подобранный элемент может сбить с толку пользователя или усложнить использование объектов по назначению.
Именно по этим причинам на большинстве качественно написанных сайтов курсор в основном остается дефолтным.
Что касается браузеров, то Opera единственная не поддерживает ни один файл курсора. Все остальные браузеры с ранних версий отображают данный объект и даже некоторые из них – такие как Safari, Firefox, Chrome – имеют свои значения.
Вашему вниманию cursor!
В каскадных стилевых таблицах предусмотрено специальное свойство, которое отвечает за изменение формы указателя при наведении на определенные элементы. Это cursor. В нем предусмотрено множество встроенных значений, которые я перечислил в таблице.
| Ключевое слово | Значение |
| Auto | Курсор автоматически подбирается, учитывая значения по умолчанию. |
| none | В указанной области указатель не отображается (работает наподобие disable в других случаях). |
| url | Можно вписать ссылку на image подходящего формата. |
| Default | Дефолтный элемент. |
| Move | Курсор показывает, что объект может быть сдвинут. |
| Pointer | Имеет вид человеческой кисти, которая указательным пальцем показывает на выбранный элемент. |
| Zoom | Отвечает за масштабирование. Бывает zoom-in (лупа с плюсом – увеличивает изображение) и zoom-out (лупа с минусом – уменьшает). |
| Help | Такой курсор срабатывает на тех элементах, где можно прочесть инструкцию. Например, в одноименном разделе многих программ «Help». |
| wait | Отображает загрузку приложений или обработку полученных команд. |
| Text | Указывает на возможность ввода текста. |
| No-drop | Появляется, когда перетаскиваемый элемент (drag) нельзя переместить в некую область. |
Эту таблицу можно продлить еще на такое же количество описаний курсоров. Поэтому после перечисленного основного материала я решил привести конкретные примеры.
Контрольный в знания
Теперь я приведу в качестве примера приложение для отображения разных видов курсоров.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cursor</title>
<style>
body { background: #F0F8FF; font-size: 24px;}
#load { text-align: center; border: 3px double; padding: 12px; cursor:wait; background: #dff;}
#help {cursor:help; }
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Просто текстовый контент, который ссылается на источник 1 и источник 2. Если этого мало, то вставлена ссылка на
"<a href="3.html" id="help">Справку</a>".</p>
<p id="load"> Что-то грузится.</p>
</body>
</html> |
После запуска примера обратите внимание на то, как меняются указатели и какие установлены по умолчанию.
Пришло время нам прощаться. Подписывайтесь на обновления блога и не забывайте делиться ссылкой на мои статьи с друзьями. Удачи и пока-пока!
С уважением, Роман Чуешов
