Rollover эффект для изображения

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

Где это может пригодится

Ролловер эффект с помощью onmouseover можно использовать для создания интерактивных элементов на веб-страницах, таких как:

1. Изменение цвета и/или фона при наведении курсора на ссылку или кнопку.
2. Появление дополнительной информации или изображения при наведении на элемент.
3. Анимация элемента при наведении на него (например, изменение размера, перемещение, поворот и т.д.).
4. Изменение стиля шрифта, размера или цвета текста при наведении на него.
5. Показ подсказки или всплывающего окна с дополнительной информацией при наведении на элемент.

Примеры создания с помощью 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 можно создать для следующий ситуаций:

1. Изменение цвета фона при наведении курсора на элемент:
   <div onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">Наведите курсор на этот элемент</div>
2. Изменение изображения при наведении курсора на элемент:
   <img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'">
3. Изменение текста при наведении курсора на элемент:
   <div onmouseover="this.innerHTML='Наведение курсора'" onmouseout="this.innerHTML='Оригинальный текст'">Наведите курсор на этот элемент</div>
4. Изменение стиля текста при наведении курсора на элемент:
   <div onmouseover="this.style.color='red'; this.style.fontWeight='bold'" onmouseout="this.style.color='black'; this.style.fontWeight='normal'">Наведите курсор на этот элемент</div>

Ролловер эффект с помощью CSS

Данный эффект может быть легко создан с помощью CSS и может улучшить взаимодействие пользователя с веб-сайтом.

1. Изменение цвета фона при наведении курсора: используйте свойство background-color с псевдоклассом :hover. Например:
   .button:hover {
background-color: #ff0000;
}
2. Изменение стиля текста при наведении курсора: используйте свойство font-weight или font-style с псевдоклассом :hover. Например:
   .link:hover {
font-weight: bold; text-decoration: underline;
}
3. Изменение расположения элемента при наведении курсора: используйте свойство transform с псевдоклассом :hover. Например:
   .card:hover {
transform: scale(1.1);
}
4. Изменение прозрачности элемента при наведении курсора: используйте свойство opacity с псевдоклассом :hover. Например:
   .image:hover {
opacity: 0.8;
}

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