Курсоры.
Свойство CSS cursor позволяет установить нестандартный вид курсора для того или иного элемента - блока, текста, рисунка.. то есть когда пользователь наведет курсор на такой элемент он, курсор то бишь, поменяет свой вид.
Курсоры можно выбирать как стандартные, так и подгружать свои собственные пользовательские курсоры - файлы в формате cur, aniили svg.
Теперь по порядку..
Стандартные курсоры.
Вы наверняка обратили внимание на то, что по умолчанию, на странице, курсор приобретает вид в зависимости от специфики элемента, на который он нацелен, например если навести курсор на ссылку он отображается в виде указателя обычно "руки", если на некий текст, то курсор становится вида "работа с текстом", а если просто елозить по пустому месту на странице, то курсор имеет обыкновенный вид "стрелка".
Так вот, для того чтобы изменить внешний вид курсора свойству cursor необходимо указать одно из возможных значений:
- auto - курсор назначается автоматически в зависимости от специфики элемента.(по умолчанию)
- crosshair - перекрестие
- default - встроенный(основной)
- e-resize - стрелка на "восток"
- hand - указатель аналогия pointer
- help - помощь
- move - перемещение
- n-resize - переместить на "север"
- ne-resize - переместить на "северо-восток"
- nw-resize - переместить на "северо-запад"
- pointer - указатель
- progress - продолжение операции
- s-resize - переместить на "юг"
- se-resize - переместить на "юго-восток"
- sw-resize - переместить на "юго-запад"
- text - текст
- w-resize - переместить на "запад"
- wait - ожидание
Кроме того некоторые браузеры поддерживают дополнительные формы курсоров:
- all-scroll - переместить во все стороны
- col-resize - переместить по горизонтали
- no-drop - указатель "нет доступа"
- not-allowed - нет доступа
- row-resize - переместить по вертикали
- vertical-text - вертикальный текст
Следует понимать, что данные значения являются, не каким либо конкретным изображением курсора, а определяют тип курсора. Внешний вид курсора зависит от настроек операционной системы пользователя.
Проведите курсором над каждым значением свойства cursor в списке выше, чтобы увидеть какую форму принимает курсор в Вашем браузере.
Провели? А теперь если есть желание можете зайти в "Пуск" > "Панель управления" > "Мышь" > закладка "Указатели" > из списка "Схема" выберите любую другую схему.. Теперь можете снова провести по списку выше, чтобы увидеть, как теперь выглядят курсоры.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Стандартные курсоры</title>
</head>
<body>
<div style="cursor: wait; padding: 30px; background-color: #c0e4ff; border: 2px solid #008000; height: 300px; width: 300px">
Буду думу думать..
<p style="width: 150px; text-align: center; cursor: help;background-color: #c5ffa0; border: 2px solid #008000">Кнопка "помощь"</p>
</div>
</body>
</html>
<html>
<head>
<title>Стандартные курсоры</title>
</head>
<body>
<div style="cursor: wait; padding: 30px; background-color: #c0e4ff; border: 2px solid #008000; height: 300px; width: 300px">
Буду думу думать..
<p style="width: 150px; text-align: center; cursor: help;background-color: #c5ffa0; border: 2px solid #008000">Кнопка "помощь"</p>
</div>
</body>
</html>
Пользовательские курсоры.
Для того чтобы курсор приобрёл нестандартный вид его необходимо подгрузить присвоив свойству cursor значение: url("путь к курсору").
Например:
div { cursor : url("my.cur"); }
Так же можно указать несколько пользовательских курсоров, через запятую, в этом случае браузер будет пытаться отобразить первый из перечисленных, если у него это не получится, возьмется за второй.. и т. д. А не получится может из-за того, что браузер не поддерживает определённый формат файла-курсора. Как уже говорилось выше можно использовать файлы в формате cur, ani или svg - такие курсоры поддерживаются, начиная с IE6, Firefox 1.5. Однако Firefox 1.5 не поддерживает формат ani, а IE6 в свою очередь, не понимает формат svg.
Поэтому список курсоров составляют из файлов разных форматов.. например, так:
div { cursor : url("my.cur"), url("my.svg"); }
И уж что б совсем обезопасить себя в конце списка рекомендуется ставить один из курсоров из стандартного набора.
Вот так:
div { cursor : url("my.cur"), url("my.svg"), help; }
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div {
cursor : url("cursors/my.ani"), crosshair;
width: 200px;
padding: 10px;
text-align: center;
background-color: #c5ffa0; border: 2px solid #008000
}
</style>
<title>Пользовательские курсоры</title>
</head>
<body>
<div>
Если нацелив курсор на этот блок вместо "навороченного" курсора Вы видите обыкновенное перекрестие значит Ваш браузер не поддерживает формат ani
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
cursor : url("cursors/my.ani"), crosshair;
width: 200px;
padding: 10px;
text-align: center;
background-color: #c5ffa0; border: 2px solid #008000
}
</style>
<title>Пользовательские курсоры</title>
</head>
<body>
<div>
Если нацелив курсор на этот блок вместо "навороченного" курсора Вы видите обыкновенное перекрестие значит Ваш браузер не поддерживает формат ani
</div>
</body>
</html>
Ну и в конце..
Свойство cursor, имеет еще одно значение - inherit. которое говорит о том, что свойство наследуется от элемента-родителя.
Полезные советы:
- В подавляющем большинстве случаев не стоит вообще трогать курсоры, оставьте всё как есть. Пользователя могут ввести в заблуждение нестандартные курсоры, например, когда при наведении на ссылку вместо привычной "руки" появляется что-то другое. Пользовательские курсоры уместны лишь там, где они действительно необходимы.
- Помните что любой курсор должен быть как минимум двухцветным. Это нужно для того чтобы его было видно на фоне такого же цвета как и сам курсор.. представьте одноцветный белый курсор на белом фоне.. вот уж задачка будет какой ни будь домохозяйке!! :)Ааа.. у меня стрелка потерялась!!.. вирусы!!.. проклятый Бил Гейтс!!.. :) и давай лупить кулаком по системному блоку.. :)
Комментариев нет:
Отправить комментарий