对悬停在层次结构之外的 img 地图区域上做出反应

Question

这是我想要实现的原型。我想在将鼠标悬停在地图区域上时突出显示地图外的文本。想到的是获取元素 id 的用法，但我是一个初学者，无法让它工作。它的最终版本不应该重复选择器代码，而是一个代码对 area-id 做出反应并向其添加“link” 请帮助！


<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

用这个替换你的脚本。

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

对悬停在层次结构之外的 img 地图区域上做出反应

reacting to hover over img map area outside of hierarchy

html

javascript