How to make clickable image previews?

Question

JavaScript

Good afternoon. there are a lot of small divs on the site with thumbnail images, and a big div in which I want to display the clicked image. to make it clearer, here is the site https://kicherov.000webhostapp.com/ , in fact, how to change the background-image by clicking on the div? there will be quite a lot of images, do you need to register a click event for each? help me please

Answer 1

if I understand correctly

если я правильно понял, как-то так

var divs = document.querySelectorAll(".thumbnails-container > div");
var cont = document.getElementById("container-1-1");

for(var i = 0 ; i<divs.length; i++){
   divs[i].onclick = function(){
      cont.style.backgroundImage = this.style.backgroundImage;
   }
}

Answer 2

jsfiddle.net/65Ggv/16
PS: Images from Google for cat icon

//Большая картинка
 <img id="dev" src="https://image.freepik.com/free-icon/no-translate-detected_318-52837.jpg"/>
 
 //мелкие картинки
 <img onclick="imgCH(this);" src="https://cdn1.iconfinder.com/data/icons/animals-18/154/cat-seat-skin-body-animal-512.png">
 
  <img onclick="imgCH(this);" src="http://icons.iconarchive.com/icons/sonya/swarm/256/Cat-icon.png">
   <img onclick="imgCH(this);" src="https://d30y9cdsu7xlg0.cloudfront.net/png/1836-200.png">

function imgCH(imgDIV)
{
   document.getElementById("dev").src = imgDIV.src;
}

-------------------------------------------------- ---------------------------------
For background-image:
HTML:

<img id="dev" style="background-size: cover; background-image: url(https://image.freepik.com/free-icon/no-translate-detected_318-52837.jpg);"/>
 
 
 <img onclick="imgCH(this);" style="background-size: cover; background-image: url(https://cdn1.iconfinder.com/data/icons/animals-18/154/cat-seat-skin-body-animal-512.png);">
 
  <img onclick="imgCH(this);" style="background-size: cover; background-image: url(http://icons.iconarchive.com/icons/sonya/swarm/256/Cat-icon.png);">
   <img onclick="imgCH(this);" style="background-size: cover; background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/1836-200.png)">

JS

function imgCH(imgDIV)
{
   document.getElementById("dev").style.backgroundImage = imgDIV.style.backgroundImage;
}