Как менять изображение по клику?

Question

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

Answer 1

Во-первых, мы должны найти кнопку и картинку

btn = document.getElementById("btn");
image = documebt.getElementById("image");

Далее, при клике на кнопку мы меняем картинку с помощью image.src:

btn.onclick = function() {
  image.src = "image2.jpg";
}

Вот и всё! Можно где угодно менять картинку через image.src

Answer 2

let image = document.querySelector(".image img");
let thumbs = document.querySelectorAll(".thumbs img");
thumbs.forEach(function(item, i, thumbs) {
  item.addEventListener("click", function() {
    image.src = item.src;
  });
});

.wrapper {
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  gap: 16px;
}

.image {
  flex: 1;
}

.image img {
  width: 100%;
  height: auto;
}

.thumbs {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.thumbs img {
  width: calc(100% / 5);
  height: auto;
}

<div class="wrapper">
  <div class="image">
    <img src="data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M24 19v-7h-23v-7h-1v14h1v-2h22v2h1zm-20-12c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm19 4c0-1.657-1.343-3-3-3h-13v3h16z'/%3E%3C/svg%3E">
  </div>
  <div class="thumbs">
    <img src="data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M24 19v-7h-23v-7h-1v14h1v-2h22v2h1zm-20-12c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm19 4c0-1.657-1.343-3-3-3h-13v3h16z'/%3E%3C/svg%3E">
    <img src="data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M24 19v-7h-1v-1c0-1.657-1.343-3-3-3h-13v4h-6v-7h-1v14h1v-2h22v2h1zm-23-3h22v-3h-22v3zm7-4h14v-1c0-1.105-.895-2-2-2h-12v3zm-4-5c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm0 1c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1z'/%3E%3C/svg%3E">
    <img src="data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M24 19v-7c0-.265-.105-.52-.293-.707-.187-.188-.442-.293-.707-.293h-22c-.265 0-.52.105-.707.293-.188.187-.293.442-.293.707v7h1v-2h22v2h1zm-19-9v-1c0-.552.448-1 1-1h4c.552 0 1 .448 1 1v1h2v-1c0-.552.448-1 1-1h4c.552 0 1 .448 1 1v1h3v-4c0-.265-.105-.52-.293-.707-.187-.188-.442-.293-.707-.293h-18c-.265 0-.52.105-.707.293-.188.187-.293.442-.293.707v4h3z'/%3E%3C/svg%3E">
    <img src="data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M24 19v-7c0-.265-.105-.52-.293-.707-.187-.188-.442-.293-.707-.293h-22c-.265 0-.52.105-.707.293-.188.187-.293.442-.293.707v7h1v-2h22v2h1zm-1-6.5c0-.133-.053-.26-.146-.354-.094-.093-.221-.146-.354-.146h-21c-.133 0-.26.053-.354.146-.093.094-.146.221-.146.354v3.5h22v-3.5zm-20-2.5v-3.5c0-.276.224-.5.5-.5h17c.276 0 .5.224.5.5v3.5h1v-4c0-.265-.105-.52-.293-.707-.187-.188-.442-.293-.707-.293h-18c-.265 0-.52.105-.707.293-.188.187-.293.442-.293.707v4h1zm2 0h6v-2c0-.552-.448-1-1-1h-4c-.552 0-1 .448-1 1v2zm8 0h6v-2c0-.552-.448-1-1-1h-4c-.552 0-1 .448-1 1v2zm-3-1v-.6c0-.221-.179-.4-.4-.4h-3.2c-.221 0-.4.179-.4.4v.6h4zm8 0v-.6c0-.221-.179-.4-.4-.4h-3.2c-.221 0-.4.179-.4.4v.6h4z'/%3E%3C/svg%3E">
    <img src="data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M24 24v-7h-23v-7h-1v14h1v-2h22v2h1zm-20-12c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm19 4c0-1.657-1.343-3-3-3h-13v3h16zm-11-15.999c-3.169 0-6 2.113-6 5.003 0 1.025.37 2.032 1.023 2.812.027.916-.511 2.228-.997 3.184 1.302-.234 3.15-.754 3.989-1.268.709.173 1.388.252 2.03.252 3.542 0 5.954-2.418 5.954-4.98.001-2.906-2.85-5.003-5.999-5.003zm-.888 7h-2.291v-.492l1.251-1.815v-.01h-1.159v-.683h2.156v.527l-1.224 1.789v.011h1.267v.673zm4.047 0h-3.188v-.674l1.741-2.379v-.014h-1.712v-.933h3v.717l-1.604 2.341v.016h1.763v.926z'/%3E%3C/svg%3E">
  </div>
</div>

БЛОГ НА HUSL

Как менять изображение по клику?

Ответы (2 шт):