Question

我有一个映射到它的一组区域的图像。单击每个区域将调用一个函数来执行某些操作。这整个考验在IE7中运行得很好！曾经一度，这是让我烦恼的Chrome。 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>

我不喜欢用这个庞大的地图区域列表来阻止你，但是我可能会在地图中出现一些错误。这是JS将函数调用绑定到这些区域上的onclick事件。下面是我添加的一段JQuery代码，它为每个区域映射分配一个href属性。

    $("#remotemap area").click(function() {
    if($(this).attr("id") != undefined) {
        logRCCommand($(this).attr("id"));
    }
    return false;
});

    $("#remotemap area").attr("href", "javascript: void(0);");

CSS：

#containerRemote{
position: absolute; /* this line, when commented, fixes the problem, but ruins layout         */
width: 170px; 
}

有趣的是，在图像的最底部有三个区域可以正常工作，尽管它们的大小不正确。这使我相信我有一些格式错误而不是语法或逻辑错误。即便如此，我也不知道会造成什么。我在互联网上寻找线索，但无济于事！

由于

更新：我认为这个问题与CSS有关。我为这个地图包含的div注释了一行CSS。瞧！一切正常，但现在整个页面的布局已经到了地狱。我不知道这应该是一个新问题，还是只是对当前问题的更新。在任何情况下，我都更新了我的代码，以包含更多相关的行。

Answer 1

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

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

Answer 2

感谢Rodolfo的评论，我能够弄清楚我的图像地图中的一个单独的div ADJACENT比我想象的要广泛，并且它的一部分（没有内容，使该部分看不见的部分）覆盖了我的图像映射，使它几乎无法使用，除了它没有被div覆盖的一小部分。

我不明白其他div是如何变得如此宽泛，但是当我有时间时，我可以稍后弄清楚：P

无论如何，我改变了包含我的图像地图的div的z-index

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

现在一切正常！我的问题不是Chrome没有触发事件，而是Chrome的内容布局与IE7的布局之间存在差异。

感谢大家的帮助！

Chrome中的图片地图：事件未触发！在IE7中正常工作

2 个答案: