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