Понадобилась как-то раз такая штука, поискала рецепты, понравился только один, в блоге интернет технологий. Метод без яваскрипта, построен только на CSS. Минус у него, конечно, тоже есть: нужно создавать еще одну картинку, без анимации, которая будет показываться посетителю по дефолту, без наведения мыши.
Тем не менее, забираю в свою записную книжку. Код, в общем, такой.
Оформление картинки (задание класса):
<a class="gif" href="#"><img src="animation.gif" alt="" /></a> |
Сам стиль:
.gif { display:block; /* Устанавливаем */ width:150px; /* Ширина и высота картинки */ height:150px; background:url('stat.gif') no-repeat; /* Заливаем блок статичной картинкой */ } /* Как видно, начальное (статическое) изображение задано как фон блока с шириной и высотой этого изображения. */ a.gif img { visibility:hidden; /* Aнимация не была видна в ситуации, когда мышь не наведена */ } a.gif:hover { background:none; /* Фон (статичное изображение) не было видно при наведении мыши */ } a.gif:hover img { visibility:visible; /* При наведении анимация показывается */ border:0; /* без обрамления ;) */ |