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

Question

[Максим]

Есть изображение на сайте, вставленное такие образом:

<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?

Comments

[Ankhena]

Если вы хотите менять картинки, то делаете 2 picture. Одну показываете, другую скрываете.

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

[Максим]

Ankhena, По поводу реализации такого ползунка, задавался вопросом. Но к сожалению не смог найти решения, натыкался на различные JS плагины, но они имели вертикальный ползунок, за который можно было перетаскивать, это не совсем то, что нужно. Как реализовать самому, не смог придумать. Нужно как-то завязать положение ползунка с границей двух изображений. А как два изображения наложить друг на друга, z-index? В общем никак не могу придумать реализацию.

[Ankhena]

Максим,
да, обычный z-index или без него, если они в нужном порядке идут.

Нужно как-то завязать положение ползунка с границей двух изображений.

Не двух, а одного. Нижний лежит себе спокойно. От верхнего показывается нужная часть.
Связать input range с шириной блока на js нет проблем.

Если вы начнете в момент клика менять пути к картинкам, то во-первых придется написать килограмм кода, чтобы менять только нужный размер, во-вторых, страница будет дергаться пока картинки подгружаются. Либо делать им предзагрузку. Выходит какой-то балаган вместо двух div с picture внутри. Нижнему может и обертка из div'а не нужна.

но они имели вертикальный ползунок

Ну какая разница куда у них был ползунок? Неужели не повернуть на 90 градусов ))))
Но хорошо, что они не подошли, потому что это лишнее.

[Максим]

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

[Ankhena]

Максим, велкам

Answer 1

[Сергей Куплетский]

Изменяйте при клике на кнопку не только значение img.src, но и source.srcset.

https://developer.mozilla.org/ru/docs/Web/API/Elem...