ANTICHAT - Показать сообщение отдельно - Небольшие статьи [html, Css, Js, Php]

Трюк, который поможет вам возпроизводить GIF изображения при наведении на них курсором.

Что нам нужно:

Первая картинка — статическая (первый кадр анимированного изображения);
Вторая картинка сама анимация.

Берем анимационную картинку и помещаем ее внутрь тега

Код:

<a>

, то есть делаем ее ссылкой. Задаем определенный класс:

Код HTML:

<a class="animgif" href="#"><img src="animation.gif" /></a>

Далее приступим к стилям:

Код HTML:

.animgif {
 display: block;
 width: 150px; /* Ширина и */
 height: 150px; /* высота картинки */
 background: url("stat.gif") no-repeat; /* Заливаем блок статичной картинкой */
}


a.animgif img {
 visibility: hidden; /* Aнимация не будет видна в ситуации, когда мышь не наведена */
}

a.animgif:hover {
 background: none; /* Фон (статичное изображение) не должно быть видно при наведении мыши */
}

a.animgif:hover img {
 visibility:visible; /* При наведении анимация показывается */
 border: 0; /* без рамки  */
}

Вот и все.