reacting to hover over img map area outside of hierarchy

Question

This is a prototype of what I wanted to achieve. I wanted to highlight text outside of the map when hovering over the map area. What came up with is the usage of getting element id but I'm a total beginner and cant make it work. The final version of it should not have a repeat of the selector code but one code reacting to area-id and adding "link" to it please help!

<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>```

Answer 1

Replace your script with this.

 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;" })
    }
 });