'How can I hover over the smaller images to make them go in the bigger image place? using JavaScript
Webpage rightnow Requirements below, but I just need to know how to work on the images.
- All your event handlers must execute only after the page has loaded.
- 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 element within the element. This same event handler will also set the text of the to the clicked thumbnail image’s title attribute. Your event handler must use event delegation (i.e., the click event handler will be attached to the element and not to the individual elements).
- You must also add event handlers to the mouseover and mouseout events of the element. When the user moves the mouse over the larger image, then you will fade the element to 90% opacity (its initial CSS opacity is 0% or transparent/invisible). When the use moves the mouse out of the figure, then fade the back to 0% opacity. You can set the opacity of an element in JavaScript by setting its style.opacity property.
#featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
#featured figcaption {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
background-color: floralwhite;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
opacity: 0;
padding: 22px 2px 2px 2px;
text-align: center;
display: block;
}
#thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
#thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/lab03.js"></script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<!-- <img src="images/medium/5855774224.jpg" title="Battle" alt="big version" /> -->
<!--Big Image -->
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" alt="big version" />
<figcaption> Battle </figcaption>
</figure>
<!-- smaller images -->
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle"/>
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens"/>
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence"/>
</div>
</main>
</body>
</html>Solution 1:[1]
Here's a solution to requirement 3:
document.getElementById("thumbnails").addEventListener("click", (event) => {
if (event.target.tagName === "IMG") {
const biggerImage = document.getElementById("featured").children[0];
const captionElem = document.getElementById("featured").children[1];
const smallerImage = event.target;
biggerImage.src = event.target.src.replace("small", "medium");
biggerImage.title = captionElem.innerText = smallerImage.title;
}
})
For requirement 4:
Add the following css
#featured {
opacity: 0;
}
And Javascript
document.getElementById("featured").addEventListener("mouseover", (event) => {
event.target.style.opacity = "90%";
});
document.getElementById("featured").addEventListener("mouseleave", (event) => {
event.target.style.opacity = "0%";
});
#featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
opacity: 0;
}
#featured figcaption {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
background-color: floralwhite;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
opacity: 0;
padding: 22px 2px 2px 2px;
text-align: center;
display: block;
}
#thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
#thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/lab03.js"></script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<!-- <img src="images/medium/5855774224.jpg" title="Battle" alt="big version" /> -->
<!--Big Image -->
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" alt="big version" />
<figcaption> Battle </figcaption>
</figure>
<!-- smaller images -->
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle"/>
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens"/>
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence"/>
</div>
</main>
<script>
document.getElementById("thumbnails").addEventListener("click", (event) => {
if (event.target.tagName === "IMG") {
const biggerImage = document.getElementById("featured").children[0];
const captionElem = document.getElementById("featured").children[1];
const smallerImage = event.target;
biggerImage.src = event.target.src.replace("small", "medium");
biggerImage.title = captionElem.innerText = smallerImage.title;
}
});
document.getElementById("featured").addEventListener("mouseover", (event) => {
event.target.style.opacity = "90%";
});
document.getElementById("featured").addEventListener("mouseleave", (event) => {
event.target.style.opacity = "0%";
});
</script>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |