Javascript Chrome中的图像映射：事件未触发！在IE7中运行良好

我有一个带有一组区域映射的图像。单击每个区域时，将调用一个函数来执行某些操作。整个考验在IE7中非常有效！这一次，让我烦恼的是铬。Chrome不会在这些区域引发任何事件，我也无法指出问题所在。以下是相关代码：

<div id="containerRemote">
<img src="resources/buttons/RC64_small.png" width="170" height="590"
alt="" usemap="#remotemap" />
<map id="remotemap" name="remotemap">
    <area shape="circle" coords="37,47.5,12" alt="TV Input" />
    <area shape="circle" id="format" coords="37,78.5,12.5" alt="Format" />
    <area shape="circle" coords="85.5,60.5,13" alt="Power" />
    <area shape="circle" id="poweron" coords="140.5,50.5,12.5" alt="DTV Power On" />
    <area shape="circle" id="poweroff" coords="140.5,79.5,12" alt="DTV Power Off" />
    <area shape="circle" id="play" coords="87.5,134,17" alt="Play" />
    <area shape="circle" id="stop" coords="87.5,95.5,13" alt="Stop" />
    <area shape="circle" id="rewind" coords="43,134,14" alt="Rewind" />
    <area shape="circle" id="fastforward" coords="133.5,134,14" alt="Fast Forward" />
    <area shape="circle" id="pause" coords="61.5,164.5,13" alt="Pause" />
    <area shape="circle" id="record" coords="116,162.5,13" alt="Record" />
    <area shape="circle" id="replay" coords="61.5,101.5,13" alt="Replay" />
    <area shape="circle" id="advance" coords="116,105,13" alt="Advance" />
    <area shape="circle" id="guide" coords="40.5,205.5,15" alt="Guide" />
    <area shape="circle" id="active" coords="68.5,187.5,17" alt="Active" />
    <area shape="circle" id="list" coords="106.5,187.5,14" alt="List" />
    <area shape="circle" id="exit" coords="133.5,209,15" alt="Exit" />
    <area shape="circle" id="select" coords="89,243.5,18" alt="Select" />
    <area shape="circle" id="up" coords="89,209,12.5" alt="Up" />
    <area shape="circle" id="up2" coords="73.5,211.5,12.5" alt="Up" />
    <area shape="circle" id="up3" coords="104.5,211.5,12.5" alt="Up" />
    <area shape="circle" id="down" coords="89,279,12.5" alt="Down" />
    <area shape="circle" id="down2" coords="73.5,271.5,12.5" alt="Down" />
    <area shape="circle" id="down3" coords="104.5,271.5,12.5" alt="Down" />
    <area shape="circle" id="left" coords="53.5,243.5,12.5" alt="Left" />
    <area shape="circle" id="left2" coords="56,224.5,12.5" alt="Left" />
    <area shape="circle" id="left3" coords="53.5,257,12.5" alt="Left" />
    <area shape="circle" id="right" coords="122.5,243.5,12.5" alt="Right" />
    <area shape="circle" id="right2" coords="121,224.5,12.5" alt="Right" />
    <area shape="circle" id="right3" coords="119.5,257,12.5" alt="Right" />
    <area shape="circle" id="back" coords="40.5,288,15" alt="Back" />
    <area shape="circle" id="menu" coords="86.5,305,17" alt="Menu" />
    <area shape="circle" id="info" coords="133.5,290,15" alt="Info" />
    <area shape="circle" id="red" coords="45,320,12" alt="Red" />
    <area shape="circle" id="green" coords="70.5,334.5,12" alt="Green" />
    <area shape="circle" id="yellow" coords="100,334.5,12" alt="Yellow" />
    <area shape="circle" id="blue" coords="125,320,12" alt="Blue" />
    <area shape="circle" coords="47,356,15" alt="Volume Plus" />
    <area shape="circle" coords="51,399.5,14" alt="Volume Minus" />
    <area shape="circle" coords="49,428.5,12" alt="Mute" />
    <area shape="circle" id="channelup" coords="130.5, 356.5,15" alt="Channel Plus" />
    <area shape="circle" id="channeldown" coords="127.5,399,14" alt="Channel Minus" />
    <area shape="circle" id="previous" coords="126.5,428.5,12" alt="Previous Channel" />
    <area shape="circle" id="one" coords="49,456.5,12" alt="One" />
    <area shape="circle" id="two" coords="87.5,456.5,12" alt="Two" />
    <area shape="circle" id="three" coords="125,456.5,12" alt="Three" />
    <area shape="circle" id="four" coords="49,486.5,12" alt="Four" />
    <area shape="circle" id="five" coords="87.5,486.5,12" alt="Five" />
    <area shape="circle" id="six" coords="125,486.5,12" alt="Six" />
    <area shape="circle" id="seven" coords="49,513.5,12" alt="Seven" />
    <area shape="circle" id="eight" coords="87.5,513.5,12" alt="Eight" />
    <area shape="circle" id="nine" coords="125,513.5,12" alt="Nine" />
    <area shape="circle" id="dash" coords="49,539.5,12" alt="Dash" />
    <area shape="circle" id="zero" coords="87.5,539.5,12" alt="Zero" />
    <area shape="circle" id="enter" coords="125,539.5,12" alt="Enter" />
</map>
</div>

CSS:

非常有趣的是，在图像的最底部有三个区域工作正常，尽管它们的大小不正确。这使我相信我有某种格式错误，而不是语法或逻辑错误。即使如此，我也不知道是什么导致了这一切。我在网上搜寻线索，但毫无结果

谢谢

---

更新：我认为这个问题与CSS有关。我注释掉了这个映射所包含的div的一行CSS。瞧！一切都很好，但现在整个页面的布局都成了地狱。我不知道这是一个新问题，还是只是当前问题的更新。无论如何，我更新了我的代码，以包含更多相关的行

您需要向所有区域元素添加href属性

<area shape="circle" coords="37,47.5,12" alt="TV Input" href="#" />

---

多亏了鲁道夫的评论，我发现我的图像地图旁边有一个单独的div比我想象的要宽，其中一部分（没有内容的部分，使该部分不可见）覆盖了我的图像地图，使它实际上无法使用，除了div未涵盖的一小部分

我不明白另一个分区怎么会这么宽，但这是我以后有时间时要弄清楚的：p

无论如何，我更改了包含图像映射的div的z索引

#containerRemote {
  position: absolute;
  width: 170px;
  z-index: 11;
}

现在一切都好了！我的问题不在于Chrome没有启动事件，而在于Chrome的内容布局和IE7的布局之间的差异

---

谢谢大家的帮助

您的代码是无效的，因为您有多个具有相同id的元素，这是不允许的。ID是单数的。使用HTML5数据属性data-id。@epascarello我更新了代码以反映您的评论，尽管我没有使用数据id属性。相反，我只是简单地将id设置为唯一的。这并不能解决问题，尽管我感谢你抓住了我的错误，这可能会导致其他问题。Downvote没有解释原因的评论+1撤销。我将其复制/粘贴到一个页面中，将对

logRCCommand

的调用更改为

alert

，并在Chrome（和Firefox）中为me@Rodolfo我得出的结论是，这个问题与CSS有关。我将警报绑定到包含图像映射的div上的mouseover事件。警报仅在图像的底部十分之一处弹出。当我注释掉与div相关的CSS中的“position:relative；”样式时（如上所示）。事件正确触发，区域正确映射。不幸的是，这破坏了我的页面布局。我有一个JQuery，它将href属性分配给每个区域映射。请注意我编辑的文章中新添加的那一行代码。此外，我还尝试手动向每个标记添加href属性，以防JQuery出现问题。这两种解决方案都无法解决问题。

<area shape="circle" coords="37,47.5,12" alt="TV Input" href="#" />

#containerRemote {
  position: absolute;
  width: 170px;
  z-index: 11;
}