Este es un prototipo de lo que quería lograr. Quería resaltar el texto fuera del mapa al pasar el mouse sobre el área del mapa. Lo que surgió es el uso de obtener la identificación del elemento, pero soy un principiante total y no puedo hacer que funcione. La versión final no debería tener una repetición del código del selector, sino un código que reaccione a la identificación del área y agregue un "enlace". ¡Ayuda!
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" id="star" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" id="planet1" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" id="planet2" coords="124,58,8" alt="Venus" href="venus.htm"> </map> <div id="starlink" >hover over sun to make this big.</div> <div id="planet1link" >hover over planet to make this big.</div> <div id="planet2link" >hover over planet to make this big.</div> <script> document.getElementsById('star')[0].onmouseover = function(){ document.getElementsById('starlink')[0].style = "font-size: xxx-large;" } document.getElementsById('star')[0].onmouseout = function(){ document.getElementsById('starlink')[0].style = "font-size: small;" } document.getElementsById('planet1')[0].onmouseover = function(){ document.getElementsById('planet1link')[0].style = "font-size: xxx-large;" } document.getElementsById('planet1')[0].onmouseout = function(){ document.getElementsById('planet1link')[0].style = "font-size: small;" } document.getElementsById('planet2')[0].onmouseover = function(){ document.getElementsById('planet2link')[0].style = "font-size: xxx-large;" } document.getElementsById('planet2')[0].onmouseout = function(){ document.getElementsById('planet2link')[0].style = "font-size: small;" } </script> </body>```Reemplace su script con esto.
window.addEventListener("DOMContentLoaded", () => { const shapes = document.querySelectorAll("area"); for (let x=0, shape; shape = shapes[x]; x++) { shape.addEventListener("mouseover", () => { document.getElementById(shape.id + "link").style = "font-size: xxx-large;" }) shape.addEventListener("mouseout", () => { document.getElementById(shape.id + "link").style = "font-size: small;" }) } });