Главная
О проекте
ИТ-профессии
Сертификация
Удаленная работа
 

Как изменить изображение курсора мыши

Автор: Admin  


Одним из элементов дизайна сайта может послужить курсор мыши. При навигации по сайту он обычно принимает изображение либо стрелки - при наведении на рисунки, фон, либо маркер при наведении на текст, либо изображении руки - для ссылок. Все эти изображения курсора являются стандартными и одинаковы во всех браузерах.

Однако, с помощью CSS (каскадная таблица стилей) можно изменить изображение курсора мыши. Сделать его не стандартным в виде цветного рисунка любого размера. Чтобы изменить изображение курсора мыши в начале необходимо определиться при наведении на какой элемент страницы (рисунки, текст, гиперссылки) будет появляться это изображение. CSS позволяет изменить изображение курсора мыши для любого элемента, даже задать его для отдельной буквы текста. Для этого в CSS существует свойство cursor, которое определяет его тип. Чтобы его применить необходимо записать: селектор {cursor: значение}. Селектор это тот элемент при наведении на который нужно изменить изображение курсора мыши. Значение определяет, что это будет за изображение. Для задания стандартных изображений можно применять следующие значения (чтобы увидеть результат нужно навести курсор на соответствую строку):

default - курсор по умолчанию (часто стрелка)
auto - курсор задаёт браузер
crosshair - изображение в виде перекрестия
pointer - изображение в виде руки
move - указывает объект, который можно переместить
e-resize - определяет перемещение края бокса вправо
ne-resize - перемещение края бокса вверх и вправо
nw-resize - перемещение края бокса вверх и влево
n-resize - перемещение края бокса вверх
se-resize - перемещение края бокса вниз и вправо
sw-resize - перемещение края бокса вниз и влево
s-resize - перемещение края бокса вниз
w-resize - перемещение края бокса влево
text - используется для текста
vertical-text - вертикальный текст
wait - указывает на занятость программы
help - указывает, что имеется справочная информация
no-drop - указатель "нет доступа"


Не стандартное изображение можно задать с помощью значения url. Форма записи: селектор {cursor: url('полное имя рисунка'),pointer}. Форма рисунка может быть любым: png, gif, cur, ani. Форматы cur и ani это специальные форматы обозначающие указатель. Первый - статический, второй - анимационный. Создать изображение курсора мыши можно в любом графическом редакторе, таком как CorelDraw или PhotoShop. При этом необходимо не забывать, что фон рисунка должен быть прозрачным. Итак, если в качестве элемента мы выбираем слой, то селектор будет div. В результате запись примет вид: div.pic1 {cursor: url('picture.gif'),pointer}. У селектора div через точку указывается класс слоя. Поскольку на странице слоёв может быть несколько и для этого с помощью класса определяют к какому слою этот эффект будет принадлежать. Рисунок курсора находится в файле picture.gif. Существуют несколько способов подключения каскадной таблицы стилей к html-документу. Воспользуемся внутренней таблицей стилей. Для этого между открывающимся тегом <html> и <body>. Делаем запись:

<head>
<style type="text/css">
div.pic1 {cursor: url('picture.gif'),pointer}
</style>
</head>

Внутри тега <div>, для которого мы при наведении на слой мы хотим изменить изображение курсора мыши, добавляем запись class="pic1": <div class="pic1">. В результате получаем нужный эффект (чтобы его увидеть нужно навести курсор на слои; работает только в Firefox).

 

В начало


|   предыдущая   |   каталог статей   |   следующая   |
|   1   |   2   |   3   |


    




Главная
О проекте
ИТ-профессии
Сертификация
Удаленная работа
Каталог статей
Контакт
 
Компания "ПРОИнфоСистем"   2009
Rambler's Top100