Question
I need help switching my Big Image into the image on the thumbnail based on click event HTML Document CSS #pane{ display: grid; justify-content: center;
I need help switching my Big Image into the image on the thumbnail based on click event
HTML
CSS
#pane{
display: grid;
justify-content: center;
}
#thumbnailPane{
display: grid;
justify-content: center;
grid-template-areas:
'PandaBox0 PandaBox1 PandaBox2 PandaBox3 ';
}
#PandaBox0{
grid-area: PandaBox0;
}
#PandaBox1{
grid-area: PandaBox1;
}
#PandaBox2{
grid-area: PandaBox2;
}
#PandaBox3{
grid-area: PandaBox3;
}
Javascripts
PandaArray = ["1Panda.jfif",
"2Panda.jpg",
"3Panda.jpg",
"4Panda.webp"]
BabyPandaArray = ["1BabyPanda.jpg",
"2BabyPanda.jpg",
"3BabyPanda.jpg",
"4BabyPanda.png"]
window.addEventListener('load',LoadImages)
function LoadImages() {
var mainImage = document.createElement("img")
mainImage.src = "images/" + PandaArray[0]
document.getElementById("pane").appendChild(mainImage);
mainImage.setAttribute('id',"MainPandaBox")
mainImageID = document.getElementById("MainPandaBox")
for(i=0; i var thumbnailImages = document.createElement('img') thumbnailImages.src = "images/" + PandaArray[i] document.getElementById("thumbnailPane").appendChild(thumbnailImages); thumbnailImages.style.height = '100px' thumbnailImages.setAttribute('id',"PandaBox" + i) thumbnailImages.setAttribute('class',"ThumbnailBox" + i) } mainImageID.addEventListener('click', function(e){ console.log("iwasclicked") let imgTarget = e.target; mainImageID.src = imgTarget; }) }
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started