Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 19. Активация gif-анимации
Не нравится(-) 24 Нравится(+)
14-07-2008, 21:57 - GZ Design (Уроки CSS)
Урок CSS 19. Активация gif-анимации

Здравствуйте уважаемые посетители! Наш следующий урок CSS посвящён вопросу создания gif-анимации, активирующейся при наведении мыши на статичное изображение. Метод, который будет изложен в этом уроке, был изобретён ещё в конце 90-х годов, когда gif был практически единственным носителем анимации в Интернете. Сегодня, он уступил место лидера, но остаётся достаточно востребованным, как и метод, своё виденье которого я сейчас изложу...

Для выполнения урока, нам понадобятся 2 файла (картинки): статическое изображение и gif-анимация. Изображения должны быть одинакового размера.
По традиции, создаём файлы index.html и style.css и записываем в веб-документ такой начальный код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

Теперь нам нужно создать в html саму конструкцию изображения как ссылки. Запишем туда такое:
<a class="gif" href="#nogo"><img src="go.gif" alt="" /></a>
</body>
</html>

Итак, мы закончили с html, теперь можно его закрыть и приступить к работе со стилями. Запишем в style.css стили для всего блока gif:
/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №19. Активация изображения
style.css - Набор стилей для урока
=============================================================
*/

.gif {
    display:block;
    width:500px;
    height:100px;
    background:url(stat.gif) no-repeat;
}

Как видно, начальное (статическое) изображение задано как фон блока с шириной и высотой этого изображения. Теперь нам надо, чтобы наша анимация не была видна в ситуации, когда мышь не наведена. Для этого запишем такой стиль:
a.gif img {
    visibility:hidden;
}

Далее, нам надо сделать так, чтобы фон (статичное изображение) не было видно при наведении мыши:
a.gif:hover {
    background:none;
}

Осталось только проявить нашу навигацию:
a.gif:hover img {
    visibility:visible;
    border:0;
}

Вот и всё... Наш метод успешно работает во всех браузерах.
Чтобы анимация начиналась при клике на ссылку, а не при наведении на неё, надо просто заменить все параметры hiover на active.
Спасибо за внимание!


Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.0; Opera 8.хх - 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 49 Kb)


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



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

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

Публикацию посмотрели 24607 раз(а) и написали 12 комментариев.
Подписаться на канал 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!