Tengo este código (simplificado) y necesito que con el mouseover sobre las imágenes laterales, se vea la misma imagen en el centro. Es decir, reemplace la imagen normal con la misma en la que se sostiene el mouse.
<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>Hay múltiples maneras de lograr esto. Aquí hay uno. Configuración de un detector de eventos para cada una de estas imágenes en miniatura.
.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>