Tengo un mapa de imagen. Quiero mostrar una imagen cuando desplace el cursor sobre un área en el mapa de imágenes. pero es posible? Quiero decir, incluso si muestro la imagen al pasar el mouse, quiero que el mapa de la imagen siga funcionando mientras hago clic en él y lo dirijo a otra página.
aquí está el ejemplo del mapa de imágenes: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2
<!DOCTYPE html> <html> <body> <h2>Image Maps</h2> <p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p> <img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map> </body> </html>podrías agregar algo como esto:
<style> area[alt=Computer]:hover::after { content:''; background-image: url('https://placeimg.com/1600/1275/people'); background-size: 100%; background-repeat: no-repeat; display: block; width: 200px; height: 175px; } </style>eso mostrará una imagen justo debajo de la imagen que estás desplazando. luego podrías hacer lo mismo para las otras áreas
si desea que la imagen se muestre sobre la imagen original, puede intentar agregar
position: absolute;pero luego tendría que asegurarse de que haya un elemento principal con
position: relative;para que se coloque contra. como este por ejemplo:
<style> .container { position: relative; } area[alt=Computer]:hover::after { content:''; background-image: url('https://placeimg.com/200/175/people'); background-size: 100%; background-repeat: no-repeat; display: block; width: 200px; height: 175px; position: absolute; top: 20px; left: 20px; } </style> <h2>Image Maps</h2> <p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p> <div class="container"> <img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map> </div>