Смена изображения при наведении с jQuery: onmouseover/onmouseout

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

Если необходимо изменить источник изображения при наведении курсора, рекомендуется применить jQuery. Cоздайте обработчик события hover() для элемента-изображения и измените значение его атрибута src с использованием метода attr():

$('#image').hover(
  function() { $(this).attr('src', 'new-image.jpg'); },
  function() { $(this).attr('src', 'original-image.jpg'); }
);

Не забывайте подставлять вместо new-image.jpg и original-image.jpg соответствующие пути к вашим изображениям. $('#image') – это селектор jQuery, который обращается к элементу по его идентификатору.

Обработка нескольких изображений

Когда работаем с большим количеством изображений, вполне уместно использовать атрибут data-other-src для хранения пути к изображению, которое необходимо отобразить при наведении курсора:

$('img').each(function() {
  $(this).data('other-src', $(this).attr('src').replace('.jpg', '-over.jpg'));
});

А затем примените следующий код для замены изображений:

$('img').hover(
  function() { $(this).attr('src', $(this).data('other-src')); },
  function() { $(this).attr('src', $(this).data('other-src').replace('-over', '')); }
);

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

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

Представьте себе лампу в комнате:

До: 💡 (Лампа выключена: 🌑)

Включение и выключение лампы происходит при наведении курсора мыши:

$('#lightSwitch').hover(
  function() { $(this).attr('src','💡'); },
  function() { $(this).attr('src','🌑'); }
);

После наведения курсора состояние в комнате меняется:

После: 💡 (Лампа включена: 💡)

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

Мгновенное включение света: Предзагрузка изображений

Чтобы переключение изображений происходило мгновенно, без задержек, полезно предварительно загрузить изображения для отображения при наведении курсора:

$('<img>').attr('src', 'new-image.jpg');

Разместите этот код в обработчике $(function() {}), чтобы быть уверенными, что предзагрузка совершится сразу после загрузки страницы.

Мастерское управление с помощью CSS и спрайтов

Зачем использовать JavaScript, если можно обойтись CSS?

С помощью псевдокласса :hover CSS эффективно решает задачи, связанные с наведением курсора:

#image {
  background-image: url('original-image.jpg');
  transition: background-image 0.3s ease-in-out;
}
#image:hover {
  background-image: url('new-image.jpg');
}

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

Подробнее об этом расскажет наш спикер на видео

Спрайты – полет фантазии и оптимизации

При применении спрайтов, все изображения объединяются в один файл, а при наведении меняется только позиция фона элемента. Такой метод способствует снижению количества запросов к серверу и ускорюет загрузку страниц.

Доступность и адаптивность

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

Практическая реализация, документирование и совершенствование

Документирование вашего кода – это залог его надежности и последовательности. Проверьте, чтобы ваш проект на jQuery функционировал бесперебойно, даже когда JavaScript отключён.

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

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

1. .hover() | jQuery API Documentation — Официальная документация по событию hover от jQuery API.
2. Метод jQuery mouseover() — Советы от W3Schools по применению метода mouseover в jQuery.
3. Свойство relatedTarget события MouseEvent – Web APIs | MDN — Информация от MDN об свойстве relatedTarget в событиях мыши.
4. transition | CSS-Tricks — Руководство от CSS-Tricks по свойствам переходов CSS, обеспечивающим плавную анимацию при наведении.