Главная
О проекте
ИТ-профессии
Сертификация
Удаленная работа
|
|
||||||||||||||||||||||||||||
Одним из элементов дизайна сайта может послужить курсор мыши. При навигации по сайту он обычно принимает изображение либо стрелки - при наведении на рисунки, фон, либо маркер при наведении на текст, либо изображении руки - для ссылок. Все эти изображения курсора являются стандартными и одинаковы во всех браузерах. Однако, с помощью CSS (каскадная таблица стилей) можно изменить изображение курсора мыши. Сделать его не стандартным в виде цветного рисунка любого размера. Чтобы изменить изображение курсора мыши в начале необходимо определиться при наведении на какой элемент страницы (рисунки, текст, гиперссылки) будет появляться это изображение. CSS позволяет изменить изображение курсора мыши для любого элемента, даже задать его для отдельной буквы текста. Для этого в CSS существует свойство cursor, которое определяет его тип. Чтобы его применить необходимо записать: селектор {cursor: значение}. Селектор это тот элемент при наведении на который нужно изменить изображение курсора мыши. Значение определяет, что это будет за изображение. Для задания стандартных изображений можно применять следующие значения (чтобы увидеть результат нужно навести курсор на соответствую строку):
Не стандартное изображение можно задать с помощью значения 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> | 1 | 2 | 3 | |
|
||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
Компания "ПРОИнфоСистем" 2009 |
|