Активация .gif при наведении курсора с помощью CSS

Активация gif при наведении курсором

Озадачился вопросом. Нужно было воспроизводить 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 — Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.

Теперь должно быть понятнее, как работает этот пример! Спасибо за внимание..

19 февраля 2009 в 20:4026 комментариев Верстка

Комментарии — 26 комментариев

  1. #10472 Олечка в 16:38, 12 сентября 2010: (подписался)

    Ответить | Цитировать

    Спасибо большое, всё получилось!! Просто я только начала изучать css, путаюсь немного. Клёвый способ кстати!!

  2. #10475 Олечка в 18:08, 12 сентября 2010: (подписался)

    Ответить | Цитировать

    Вопрос назрел новый. Если я хочу несколько разных создать. Для каждой другой картинки нужно создавать css? Или в одном css можно прописать несколько объектов?

  3. Одному css прописать несколько объектов.

  4. #10484 pr_light в 11:26, 13 сентября 2010: (подписался)

    Ответить | Цитировать

    to: Евгений Жлобо.
    не не флеш, просто гифки, я вот думаю может можно как-то прописать время активности a:hover ‘ a?, или придется все-таки как-то jqerty использовать,. а оно, как обычно замедляет скорость загрузки((..

  5. Ну, jQuery не замедляет скорость загрузки, а лишь чуть-чуть требует ресурсов от компьютера.
    На сколько мне известно, отсчет времени для hover поставить нельзя.
    Пока у меня одна идея, не очень рациональная, но идея:
    «Имеем гиф анимацию из трех кадров. Нарезаем эти три кадра как отдельные картинки. И потом при помощи jQuery мы можем показывать любую определенную.»
    Конечно, вместо трех кадров может быть сколь угодно, но сами понимаете, грузить они будут ого-го!

  6. #10489 pr_light в 13:09, 13 сентября 2010: (подписался)

    Ответить | Цитировать

    ну вот и я, собственно, о том же).. занимаюсь сеошкой, так что каждый бит на счету) ..
    ладно, что-нить придумаю, отпишусь).. просто очень не хочется действовать флеш… вроде видел где-то подобный скриптец, на буржуйских просторах…

  7. #24823 jens в 20:22, 19 января 2014: (подписался)

    Ответить | Цитировать

    Аэто работает если на странице стоит 2 или 3 картинки с такой фичей?

  8. #24825 jens в 22:07, 19 января 2014: (подписался)

    Ответить | Цитировать

    @ jens:
    Проверил все работает, Помоги доделать html чтобы можно было вставлять самому любую статичную гифку или jpg для каждой такой анимации…Я хочу создавать из таких анимашек миниатюры к статьям

  9. #24828 jens в 23:01, 19 января 2014: (подписался)

    Ответить | Цитировать

    jens писал(а):

    #24825
    jens
    в 22:07, 19 января 2014:

    (подписался)
    Ответить |
    Цитировать

    @ jens:
    Проверил все работает, Помоги доделать html чтобы можно было вставлять самому любую статичную гифку или jpg для каждой такой анимации…Я хочу создавать из таких анимашек миниатюры к статьям

    Вот созрел правильный вопрос, как мне создавать такие анимации со статичной картинкой(должны быть тоже всегда разные, потомучто статьи разные 🙂 ) ??? В общем что прописать в background:url(‘stat.gif’) no-repeat; /* Заливаем блок статичной картинкой */ что бы можно вставить любую стат.картинку? И что нужно дописать в html чтобы можно было самому вставлять стат.картинку?Заранее Благодарю всех за помощь и поддежрку!!!

  10. #60162 Таня в 21:45, 11 ноября 2016:

    Ответить | Цитировать

    Спасибо. Легко, понятно. То что надо

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting