Озадачился вопросом. Нужно было воспроизводить gif анимацию при наведении на нее курсора. Желательно без JavaScript!
Этот метод был изобретен в 90-х годах, однако он до сих пор популярен. Все что нужно для этого урока, так это 1 картинка статичная, 2 gif анимация (одинакового размера и фона), руки и мозК!
Создаем картинку и помещаем ее внутрь тега <a>, то есть делаем ее ссылкой. Задаем a определенный класс.
<a class="gif" href="#"><img src="animation.gif" alt="" /></a>
HTML на этом закончился. Теперь приступим к стилям. В общем, чтобы не мучатся, css я полностью закомментирвоал. Смотрите:
.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; /* без обрамления ;) */
}
visibility, предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним.
visibility: visible | hidden
visible — Отображает элемент как видимый.
hidden — Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
Теперь должно быть понятнее, как работает этот пример! Спасибо за внимание..
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
не не флеш, просто гифки, я вот думаю может можно как-то прописать время активности a:hover ‘ a?, или придется все-таки как-то jqerty использовать,. а оно, как обычно замедляет скорость загрузки((..
Ответить | Цитировать
На сколько мне известно, отсчет времени для hover поставить нельзя.
Пока у меня одна идея, не очень рациональная, но идея:
«Имеем гиф анимацию из трех кадров. Нарезаем эти три кадра как отдельные картинки. И потом при помощи jQuery мы можем показывать любую определенную.»
Конечно, вместо трех кадров может быть сколь угодно, но сами понимаете, грузить они будут ого-го!
Ответить | Цитировать
ладно, что-нить придумаю, отпишусь).. просто очень не хочется действовать флеш… вроде видел где-то подобный скриптец, на буржуйских просторах…
Ответить | Цитировать
Ответить | Цитировать
Проверил все работает, Помоги доделать html чтобы можно было вставлять самому любую статичную гифку или jpg для каждой такой анимации…Я хочу создавать из таких анимашек миниатюры к статьям
Ответить | Цитировать
Вот созрел правильный вопрос, как мне создавать такие анимации со статичной картинкой(должны быть тоже всегда разные, потомучто статьи разные 🙂 ) ??? В общем что прописать в background:url(‘stat.gif’) no-repeat; /* Заливаем блок статичной картинкой */ что бы можно вставить любую стат.картинку? И что нужно дописать в html чтобы можно было самому вставлять стат.картинку?Заранее Благодарю всех за помощь и поддежрку!!!
Ответить | Цитировать