Главная » Создание сайтов » Верстка » Активация .gif при наведении курсора с помощью CSS

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

Теперь должно быть понятнее, как работает этот пример! Спасибо за внимание... С уважением, Vasilenko Ivan!
19 февраля 2009 в 20:4026 комментариев Верстка

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

  1. #450 greenkaktusx в 20:49, 19 февраля 2009: (подписался)

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

    Прикольно! :-)

  2. #466 AlexPTS в 11:47, 22 февраля 2009:

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

    >>Заливаем блок статичной картинкой.

    Т.е. у нас 2 картиночки, 1 неанимированная, 2 анимированная?

    Если так, то не проще просто при наведении подменять бэкграунд-статику на динамику?

  3. #467 WebMast в 12:22, 22 февраля 2009:

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

    Нет, не проще. Разницы, пркатически никакой... Реализуй-ка свой способ, кроссбраузерный. =).

  4. #469 AlexPTS в 17:06, 22 февраля 2009:

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

    Мне проще ))) Кроссбраузерность остается ;)

  5. #472 Профессор в 21:49, 22 февраля 2009:

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

    Спасибо!

    Очень полезная штука. Сам бы не догадался... ;-)

  6. #486 WebMast в 10:51, 24 февраля 2009:

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

    AlexPTS, выложи сюда код, пожалуйста...

  7. #490 сергей в 15:56, 24 февраля 2009:

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

    интересное решение, спасибо за подсказку.

  8. #501 Vic в 22:07, 25 февраля 2009:

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

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

  9. #647 Киця в 18:03, 26 марта 2009:

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

    Коротко и содержательно! Спасибо.

  10. #3022 vootshi в 11:05, 28 июля 2009: (подписался)

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

    Сделал иконки на главной — по вашему примеру, вроде бы получилось неплохо, но порылся ещё в инете и нашёл примеры когда при НАЖАТИИ картинка снова меняется. Там это реализовано так, что в ОДНОМ файле есть все три разных фона и при разных условиях normal hover active происходит смещение отображения картинки на заданное число пикселей. В общем говоря, доведено до логического завершения, то бишь до непосредственного нажатия курсором.

    После анализа, я так и не вкурил как реализовать этот способ в случае с использованием вашего решения. Хочется что бы картинка при нажатии возвращалась прежняя, не заданная изначально. Дело в том, что у меня при наведении не АНИМАЦИЯ вкл. а картинка просто становиться ЦВЕТНОЙ, а изначально она ЧБ... Не подскажете как добиться того, что бы при клике происходил возврат в первоначальное состояние?

  11. #3067 vootshi в 11:36, 29 июля 2009: (подписался)

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

    Если не сложно, помогите в коде разобраться... В общем сделал я такую феню:

    .authors {

    display:block;

    width:50px;

    height:50px;

    background:url ('http://makler-asbest.ru/wp-content/uploads/2009/07/ico_authors_grey.png') no-repeat;

    }

    a.authors img {

    visibility:hidden;

    }

    a.authors:hover img {

    visibility:visible;

    border:0;

    }

    a.authors:active img {

    visibility:hidden;

    }

    и верхняя картинка, как и задумывалось, с верху исчезает и остается только фон (чб картинка), но вместе с верхней исчезает и кликабельная ссылка, которая изначально картинке присвоена ... что нибудь тут можно изобрести что бы ссылка оставалась рабочей?

  12. #3089 WebMast в 19:58, 29 июля 2009:

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

    vootshi, напиши мне. JID: webmast@jabber.org. Icq: 4ноль799495ноль.

  13. #10109 pr_light в 17:12, 19 августа 2010: (подписался)

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

    В ОБЩЕМ ТО ВОПРОС ТАКОЙ, а как сделать, чтобы гиф запоскался каждый раз заново?, и после отведения курсора доигрывался, после повторного наведения начинал с начала?,

    а так, проще и правда просто подставить фон а a:hover

  14. pr_light, флэш?

  15. #10444 Олечка в 12:46, 11 сентября 2010: (подписался)

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

    Простая картинка не анимированная не показывается просто пустое место, при наведеннии на это пустое место анимированный gif появляется!! Помогите пожалуйста!!!!

  16. Убетитесь, что у вас на сервере две картинки и путь к ним прописан правильно.

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

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

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

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

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

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

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

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

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

    to: Евгений Жлобо.

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

  21. Ну, jQuery не замедляет скорость загрузки, а лишь чуть-чуть требует ресурсов от компьютера.

    На сколько мне известно, отсчет времени для hover поставить нельзя.

    Пока у меня одна идея, не очень рациональная, но идея:

    «Имеем гиф анимацию из трех кадров. Нарезаем эти три кадра как отдельные картинки. И потом при помощи jQuery мы можем показывать любую определенную.»

    Конечно, вместо трех кадров может быть сколь угодно, но сами понимаете, грузить они будут ого-го!

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

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

    ну вот и я, собственно, о том же)... занимаюсь сеошкой, так что каждый бит на счету) ...

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

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

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

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

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

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

    @ jens:

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

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

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

    jens писал(а):

    #24825

    jens

    в 22:07, 19 января 2014:

    (подписался)

    Ответить |

    Цитировать

    @ jens:

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

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

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

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

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting