Reference no: EM131991954
Make the appropriate changes using JavaScript to the HTML below
1. You will add event handlers to the thumbnail images and to the larger image.
2. All of your event handlers must execute only after the page has loaded.
3. You are going to add a click event handler to each of the thumbnail images. When the smaller image is clicked, you code will show the larger version of the image in the <img> element within the <figure> element. This same even handler will also set the <figurecaption> text of the <figure> to the clicked thumbnail image' title attribute. Your event handler must use event delegation (I.E., the click event handler will be attached to the <div id=thumbnails'> element and not to the individual <img> elements).
4. You must also add event handlers to the mouseover and mouseout events of the <figure> element. When the user moves the mouse over the larger image, then you will fade the <figcaption> element to about 80% opacity (its initial CSS opacity is 0% or transparent/invisible).When the user moves the mouse out of the figure, then fade the <figcaption> back to 0% opacity. You can set the opacity of an element in JavaScript by setting its style.opacity property.
~~~~~~~~~~~~~~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" />
<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>