Make the appropriate changes using JavaScript to the HTML below. 1. You will add
ID: 3593859 • Letter: M
Question
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.
*Insert a ~1~ in any spot where image names or references need to be please*
~~~~~~~~~~~~~~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>
Explanation / Answer
There are some changes in the code needed to perform what you needed in the description.Thankyou.
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Larger Images</title>
<script type="text/javascript">
function displayImages(name) {
var curr = document.getElementById('currentImg');
var way = 'images/';
var src = way + name;
curr.src = src;
curr.alt = name;
curr.title = name;
}
</script>
<style type="text/css">
#featured{
clear: both;
width: 700px;
margin: 10px;
}
#thumbnails {
float: left;
width: 150px;
margin-right: 15px;
border-right: 1px solid #000;
text-align: center;
}
#thumbImages {
float: right;
width: 530px;
margin: 0;
text-align: center;
}
img {
margin: 10px 0 10px 0;
}
</style>
</head>
<body>
<div id="featured">
<div id="thumbnails">
<img src="1.jpg" alt="1.jpg" title="1.jpg" />
<br />
<img src="2.jpg" alt="2.jpg" title="2.jpg" />
<br />
<img src="3.jpg" alt="3.jpg" title="3.jpg" />
<br />
<img src="4.jpg" alt="4.jpg" title="4.jpg" />
<br />
<img src="5.jpg" alt="5.jpg" title="5.jpg" />
<br />
<img src="6.jpg" alt="6.jpg" title="6.jpg" />
</div>
<div id="thumbImages">
<img id="currentImg" src="2.jpg" alt="1.jpg" title="1.jpg" />
</div>
</div>
</body>
</html>
Rate an upvote....Thankyou
Hope this helps....
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.