
Для создания анимации изображения посредством html, а точнее обычной смены картинок одну на другую при наведении курсора), нам понадобится две картинки. Создавать его будет с помощью команды onMouseOver. Вот как это выглядит (наведите мышку на картинку).

Где это может пригодится
Ролловер эффект с помощью onmouseover можно использовать для создания интерактивных элементов на веб-страницах, таких как:
- Изменение цвета и/или фона при наведении курсора на ссылку или кнопку.
- Появление дополнительной информации или изображения при наведении на элемент.
- Анимация элемента при наведении на него (например, изменение размера, перемещение, поворот и т.д.).
- Изменение стиля шрифта, размера или цвета текста при наведении на него.
- Показ подсказки или всплывающего окна с дополнительной информацией при наведении на элемент.
Примеры создания с помощью onmouseover
Rollover эффект идеально подойдет для создания кнопок. По такой кнопке так и хочется кликнуть! Как вариант, можно сделать такую кнопку для подписки на рассылку, feedburner или для кнопок социальных сетей.
Рассмотрим на примере:
У нас есть 2 исходных изображения:
https://mycrib.ru/wp-content/uploads/2018/10/rollover-image-1.png

https://mycrib.ru/wp-content/uploads/2018/10/rollover-image-2.png
Нужно сделать смену изображений при помощи команды onMouseOver.
Подставляем ссылки на изображения в html код Rollover и получаем:
<a href="url страницы, на которую ведет кнопка"><img src="URL первого кадра / первого изображения" onmouseover="this.src='URL второго кадра / второго изображения'" onmouseout=" this.src='URL первого кадра / первого изображения'" /></a>
Другие варианты применения ролловер-эффекта с помощью onmouseover
Ролловер-эффекты с помощью onmouseover можно создать для следующий ситуаций:
- Изменение цвета фона при наведении курсора на элемент:
<div onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">Наведите курсор на этот элемент</div>
- Изменение изображения при наведении курсора на элемент:
<img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'">
- Изменение текста при наведении курсора на элемент:
<div onmouseover="this.innerHTML='Наведение курсора'" onmouseout="this.innerHTML='Оригинальный текст'">Наведите курсор на этот элемент</div>
- Изменение стиля текста при наведении курсора на элемент:
<div onmouseover="this.style.color='red'; this.style.fontWeight='bold'" onmouseout="this.style.color='black'; this.style.fontWeight='normal'">Наведите курсор на этот элемент</div>
Ролловер эффект с помощью CSS
Данный эффект может быть легко создан с помощью CSS и может улучшить взаимодействие пользователя с веб-сайтом.
- Изменение цвета фона при наведении курсора: используйте свойство background-color с псевдоклассом :hover. Например:
.button:hover {
background-color: #ff0000;
} - Изменение стиля текста при наведении курсора: используйте свойство font-weight или font-style с псевдоклассом :hover. Например:
.link:hover {
font-weight: bold; text-decoration: underline;
} - Изменение расположения элемента при наведении курсора: используйте свойство transform с псевдоклассом :hover. Например:
.card:hover {
transform: scale(1.1);
} - Изменение прозрачности элемента при наведении курсора: используйте свойство opacity с псевдоклассом :hover. Например:
.image:hover {
opacity: 0.8;
}
Ролловер эффект является полезным инструментом для улучшения пользовательского интерфейса веб-сайтов. Однако, его использование должно быть ограничено и не должно создавать избыточной нагрузки на страницу, чтобы не ухудшать общую производительность веб-сайта.
Спасибо за урок! Обязательно попробую.
Круто! Спасибо! Надо попробовать!
Всё просто и работает, теперь надо как то сделать надпись на кнопке.