Привіт шановні відвідувачі! Наш наступний урок CSS присвячений питанню створення gif-анімації, активується при наведенні миші на статичне зображення. Метод, який буде викладено в цьому уроці, був винайдений ще в кінці 90-х років, коли gif був практично єдиним носієм анімації в Інтернеті. Сьогодні, він поступився місцем лідера, але залишається досить затребуваним, як і метод, своє бачення якого я зараз викладу.
Для виконання уроку, нам знадобляться 2 файли (картинки): статичне зображення і gif-анімація. Зображення повинні бути однакового розміру.
За традицією, створюємо файли index.html і style.css і записуємо в веб-документ такий початковий код:
Тепер нам потрібно створити в html саму конструкцію зображення як посилання. Запишемо туди таке:
Отже, ми закінчили з html, тепер можна його закрити і приступити до роботи зі стилями. Запишемо в style.css стилі для всього блоку gif:
gif display # 58; block;
width # 58; 500px;
height # 58; 100px;
background # 58; url # 40; stat.gif # 41; no-repeat;
>
Як видно, початкова (статичну) зображення задано як фон блоку з шириною і висотою цього зображення. Тепер нам треба, щоб наша анімація не була видна в ситуації, коли миша не наведена. Для цього запишемо такий стиль:
a.gif img visibility # 58; hidden;
>
Далі, нам треба зробити так, щоб фон (статичне зображення) не було видно при наведенні миші:
Залишилося тільки проявити нашу навігацію:
a.gif # 58; hover img visibility # 58; visible;
border # 58; 0;
>
От і все. Наш метод успішно працює у всіх браузерах.
Щоб анімація починалася при кліці на посилання, а не при наведенні на неї, треба просто замінити всі параметри hiover на active.
Дякую за увагу!
Сумісність: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.0; Opera 8.хх - 9.xx
---------------------------------------
Правила копіювання матеріалів уроку
демо
Завантажити урок (zip, 49 Kb)