So the question is with the below html, how to write javascript that will change
ID: 3593775 • Letter: S
Question
So the question is with the below html, how to write javascript that will change the featured id, image source when one of the thumnails id images are clicked the related large image is shown? Just need a clue as to how to get started.
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" />
<img src="images/small/5856697109.jpg" title="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" />
<img src="images/small/9504449928.jpg" title="Florence" />
</div>
</main>
Explanation / Answer
**CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
function imgClick(image) {
// Getting the src of imag which is clicked
var clicked = image.src;
// Printing the img src to console
console.log(clicked);
// Setting the clicked src to the image in figure whose id = figure
document.getElementById("figure").src = clicked;
}
</script>
</head>
<body>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" id="figure"/>
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle"/>
<img src="images/small/5856697109.jpg" title="Luneburg"/>
<img src="images/small/6119130918.jpg" title="Bermuda"/>
<img src="images/small/8711645510.jpg" title="Athens"/>
<img src="images/small/9504449928.jpg" title="Florence"/>
</div>
</main>
</body>
</html>
**Comment for any further queries.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.