@mironov_m
Учусь Frontend

Как менять source srcset по клику на кнопку?

Есть изображение на сайте, вставленное такие образом:
<picture>
  <source srcset="img/cat-before-desktop.png" media="(min-width: 1440px)">
  <source srcset="img/cat-before-table.png" media="(min-width: 768px)">
  <img class="example__before" src="img/cat-before-mobile.png" alt="Толстый кот">
</picture>

Этим кодом я реализую возможность вставить определенное изображение в зависимости от разрешения устройства.
Есть две кнопки у этого изображения, "до" и "после".
В JS добавлен обработчик события клик по этим кнопкам. В зависимости от нажатой кнопки изменяется img src адрес необходимого изображения. Но это работает только при использовании именно img (мобильная версия). Если открыть сайт на компьютере, естественно используется source изображение и код JS уже не работает по нажатию на кнопки, поскольку изменение происходит img src, а используется source. Каким образом реализовать переключение изображений с учетом картинок из source?
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
@zavoloklom
Fullstack разработчик
Изменяйте при клике на кнопку не только значение img.src, но и source.srcset.

https://developer.mozilla.org/ru/docs/Web/API/Elem...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы