Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 8. Изменение курсора на сайте
Не нравится(-) 43 Нравится(+)
Урок CSS 8. Изменение курсора на сайте

В этом уроке, я расскажу о том, как при помощи CSS изменить курсор на сайте.
Пока большенство пользователей интернета ходят через IE, данный урок будет актуален, ведь изменение курсора поддерживает только он. Допустимые форматы изображений курсоров: cur; ani.
Попробуем сменить курсор...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):

body {
    cursor:url('mouse.ani');
}

a {
    cursor:url('mouse_link.ani');
}


3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<a href="/">Наведите курсор</a>
</body>
</html>

Если требуются применить другие курсоры для наведения и нажатия ссылки, добавьте в стили атрибуты "hover" и "active" к параметру "a". Например:
a:hover {
    cursor:url('mouse_hover.ani');
}

4) Сохраняем и смотрим, что получилось.


Пояснения к коду:
cursor:url('mouse.ani'); - Задание файла mouse.ani (находящегося в одной папке с файлом стилей) курсором для элемента.


---------------------------------------
Правила копирования материалов урока
Демо (только для Internet Explorer)
Скачать урок (zip, 13 Kb)
Дополнительные материалы по уроку


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 24257 раз(а) и написали 8 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

Вопрос по раскрутке сайта продажи статей.

«    Июль 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!