Как менять картинку при наведении или клике на JS (поменять src)?

Задан 24 месяца назад623 просмотров2 ответа

Есть <img> и кнопка. Хочу по клику менять картинку на другую. Пробовал менять textContent, но у картинки текста нет. Как поменять саму картинку?

Виктория Степанова 🐣 Птенец

спросил 24 месяца назад

2 ответа

✓ Принятый ответ — помог автору

У картинки путь к файлу хранится в свойстве .src — его и надо менять:

<img id="pic" src="cat.jpg" width="200">
<button id="swap">Поменять</button>

const pic = document.getElementById('pic');
document.getElementById('swap').addEventListener('click', function() {
  pic.src = 'dog.jpg';
});

textContent тут не подходит — у <img> нет текста внутри, картинка задаётся атрибутом src. Меняешь src — меняется отображаемое изображение.

Эльвира Новикова 🐣 Птенец

23 месяца назад

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

let shown = false;
swap.addEventListener('click', function() {
  shown = !shown;
  pic.src = shown ? 'dog.jpg' : 'cat.jpg';
});

Так же можно менять .alt (подпись) и любые другие атрибуты — у элемента они доступны как свойства.

Ксения Ковалёва 🐣 Птенец

23 месяца назад

Войдите, чтобы ответить на вопрос.