I posted this earlier but I think I negelced some aspects of the problem, below
ID: 3593838 • Letter: I
Question
I posted this earlier but I think I negelced some aspects of the problem, below is the full html code, the problem is to write a javascript in a js file that will:
1) add a click event handler to each of the thumbnail images, so that when clicked the larger version of the thumb nail is shown
the same event handler is also to set the <figcapture> text of the figure to the clicked thumnail images title attribute.
the souce location of the larger versions of the thumbnails is at "images/medium/5855774224.jpg"
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/chapter09-project02.js"></script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<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>
</body>
</html>
Explanation / Answer
Added code to js file.I made few changes to the HTML file too, so that it will be easy to operate using js. Comment for any further help.
**chapter09-project02.js
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;
}
**main.html
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/chapter09-project02.js"></script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<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.