Курсоры.Свойство CSS cursor позволяет установить нестандартный вид курсора для того или иного элемента - блока, текста, рисунка.. то есть когда пользователь наведет курсор на такой элемент он, курсор то бишь, поменяет свой вид. Курсоры можно выбирать как стандартные, так и подгружать свои собственные пользовательские курсоры - файлы в формате cur, aniили svg. Теперь по порядку.. Стандартные курсоры.Вы наверняка обратили внимание на то, что по умолчанию, на странице, курсор приобретает вид в зависимости от специфики элемента, на который он нацелен, например если навести курсор на ссылку он отображается в виде указателя обычно "руки", если на некий текст, то курсор становится вида "работа с текстом", а если просто елозить по пустому месту на странице, то курсор имеет обыкновенный вид "стрелка". Так вот, для того чтобы изменить внешний вид курсора свойству cursor необходимо указать одно из возможных значений:
Кроме того некоторые браузеры поддерживают дополнительные формы курсоров:
Следует понимать, что данные значения являются, не каким либо конкретным изображением курсора, а определяют тип курсора. Внешний вид курсора зависит от настроек операционной системы пользователя. Проведите курсором над каждым значением свойства 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> Пользовательские курсоры.Для того чтобы курсор приобрёл нестандартный вид его необходимо подгрузить присвоив свойству 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> Ну и в конце.. Свойство cursor, имеет еще одно значение - inherit. которое говорит о том, что свойство наследуется от элемента-родителя. Полезные советы:
|
