I have this code (simplified) and I need that with onmouseover on the side images, the same image is seen in the center. That is, replace the normal image with the same one on which the mouse is held.
<div style="float: left; margin-left: 100px; margin-top: 80px;">
<a href=""><img id="image" src="" width="100" height="100" alt="" title="" /></a>
<a href=""><img id="image2" src="" width="100" height="100" alt="" title="" /></a>
<p></p>
</div>
<div align="center">
<img id="map" src="" alt="" width="900" height="631" align="center" />
</div>There are multiple ways to achieve this. Here's one. Setting an event listener for each of these thumbnail images.
.fancy-image {
width: 80vw;
height: 80vh;
border: 10px solid yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Added id for the div, so that's easier to query -->
<div id="thumb-images" style="float: left; margin-left: 100px; margin-top: 80px;">
<a href=""><img id="image" src="https://upload.wikimedia.org/wikipedia/commons/c/c7/Grand_Turk%2838%29.jpg" width="100" height="100" alt="" title="" /></a>
<a href=""><img id="image2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/HammockonBeach.jpg/500px-HammockonBeach.jpg" width="100" height="100" alt="" title="" /></a>
<p></p>
</div>
<div align="center">
<img id="map" src="" alt="" width="900" height="631" align="center" />
</div>
<script>
const defaultPic = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Gauguin%2C_Paul_-_Landscape_near_Arles_-_Google_Art_Project.jpg/1920px-Gauguin%2C_Paul_-_Landscape_near_Arles_-_Google_Art_Project.jpg'
const centerImg = document.getElementById('map')
centerImg.setAttribute('src', defaultPic)
// Getting all the images inside the thumb-images div.
const images = Array.from(document.querySelectorAll(`div[id="thumb-images"] img`))
// Fetch the center image
// For each "thumbnail" image, add an event lister for mouseover and mouseout.
// Figure out the src from the caller image and set is as src for the center
images.forEach((image) => {
image.addEventListener('mouseover', (event) => {
centerImg.setAttribute('src', event.target.src)
centerImg.classList.add('fancy-image')
})
image.addEventListener('mouseout', (event) => {
centerImg.setAttribute('src', defaultPic)
centerImg.classList.remove('fancy-image')
})
})
</script>
</body>
</html>