Смена источника изображения при наведении: CSS для всех браузеров

Быстрый ответ

Для изменения источника изображения в теге <img> при наведении курсора советую обратиться к CSS и псевдоклассу :hover. Рассмотрим вариант применения одного HTML-элемента в связке с CSS-анимациями. Вот основной пример:

.img-hover {
  /* 'default.jpg' подразумевает: "Сегодня вы выглядите восхитительно!" */
  background-image: url('default.jpg');
  width: 200px; /* Оптимальная ширина для вашего изображения */
  height: 200px; /* Подходящая высота для вашего изображения */
  /* Плавные переходы, как правило, обращают на себя внимание */
  transition: background-image 0.5s ease-in-out; 
}

.img-hover:hover {
  /* 'on-hover.jpg' предлагает: "Остановись, чтобы разглядеть меня!" */
  background-image: url('on-hover.jpg');
}

Забудьте про тег <img>. Теперь класс .img-hover применяется к <div>. Замените default.jpg и on-hover.jpg на свои изображения для создания эффекта при наведении. Позвольте вашим пользователям ощутить гладкость и грацию переходов.

Не только красота: усилим доступность

Визуальная привлекательность — это здорово, но истинная уникальность скрыта в доступности. Придайте важность своим изображениям, добавив содержательный атрибут alt:

<div class="img-hover" role="img" aria-label="Описание вашего изображения"></div>

Благодаря атрибутам role и aria-label вы повышаете качество взаимодействия с помощью вспомогательных технологий, упрощая навигацию по сайту.

Обеспечим визуальную стабильность: рекомендации по кросс-браузерности

Идеальный внешний вид обычно зависит от совместимости с браузерами. Протестируйте результат в Chrome, Firefox, Safari и Edge, чтобы ваш сайт выглядел непревзойденно в любом браузере. Чтобы избежать зависания над поиском, инструменты типа BrowserStack или LambdaTest могут стать вашими спасителями.

Больше возможностей управления: включим JavaScript

Если вы хотите больше поконтролировать свои изображения, JavaScript предоставит вам нужные инструменты. Обработчики событий mouseover и mouseout позволят создать индивидуальные взаимодействия:

const img = document.querySelector('.image-selector');
// Mouseover сообщает: "Готов к сюрпризу!"
img.addEventListener('mouseover', () => img.src='hover-img.jpg'); 
// Mouseout признает: "Я скоро вернусь!"
img.addEventListener('mouseout', () => img.src='default-img.jpg');

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

Визуализация

Визуализируйте тег <img> как сцену на вашем сайте:

<img src="daylight.jpg" alt="День">

Эффект при наведении — как подход креативного режиссёра:

frame:hover {
    image-source: 'stars.jpg'; 
}

До наведения:

Сцена: [🖼️ Дневная панорама]

После наведения:

Сцена: [🖼️ Вид звёздного неба]

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

Даем приоритет производительности и плавности переходов

Производительность сайта — это основа отличного UX. Управление изображениями требует определенной работы, но с некоторыми хитростями можно достичь и легкости, и быстроты страницы:

• Используйте TinyPNG или ImageOptim, чтобы сжать изображения без потери качества.
• Используйте адаптивные изображения с атрибутом srcset, чтобы ускорить время загрузки:

<img src="example.jpg" srcset="example-480.jpg 480w,
             example-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" alt="Адаптивный пример">

Этот трюк играет роль волшебника, адаптирующего изображения к разным экранам и разрешениям.

Размышления вне коробки: альтернативные стратегии

Хотите работать с настоящими тегами <img>? Вот некоторые хитроумные стратегии:

• Используйте обертку: поместите изображение в <div> и применяйте эффекты при наведении, меняя свойство display при наведении:

<div class="image-wrapper">
  <img src="default.jpg" alt="Стандартное изображение" class="default-image">
  <img src="hover.jpg" alt="Изображение при наведении" class="hover-image">
</div>

.hover-image {
  display: none; /* "Игра в прятки началась!" */
}
.image-wrapper:hover .hover-image {
  display: block; /* "Тадам!" */
}
.image-wrapper:hover .default-image {
  display: none; /* "Моя очередь спрятаться." */
}

• Включите Javascript на самом деле: воспользуйтесь интерактивностью и оживитесь с помощью взаимодействий, которые вышли бы за рамки возможностей CSS.

Полезные материалы

1. :hover – CSS: Каскадные таблицы стилей | MDN — подробная документация о псевдоклассе :hover в CSS.
2. Как создать эффект накладки при наведении на изображение — пошаговая инструкция по созданию эффектов накладки на изображения с помощью CSS.
3. Метод addEventListener() – Пример кода слушателя событий в JavaScript — узнайте, как использовать слушатели событий в JavaScript для взаимодействия с изображениями.
4. CSS :hover Selector — справочник о селекторе :hover от W3Schools.
5. Прозрачность изображений в CSS / Transparency — обучающий материал о прозрачности изображений и связанных с ней эффектах, полезных при изменении состояния при наведении.