0

我有一组映射到它的区域的图像。每个区域，当点击时都会调用一个函数来做某事。这整个考验在 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>

我不喜欢用这个庞大的地图区域列表来骚扰你，但地图中可能存在我遗漏的一些错误。这是将函数调用绑定到这些区域的 onclick 事件的 JS。下面也是我添加的一段 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。瞧！一切正常，但现在整个页面的布局已经下地狱了。我不知道这应该是一个新问题还是只是对当前问题的更新。无论如何，我更新了我的代码以包含更多相关行。

4

2 回答 2

0

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

<area shape="circle" coords="37,47.5,12" alt="TV Input" href="#" />
于 2012-07-03T17:30:56.560 回答
0

感谢 Rodolfo 的评论，我能够弄清楚我的图像映射的单独 div ADJACENT 比我想象的要宽，并且它的一部分（没有内容的部分，使该部分不可见）覆盖了我的图像映射，使其实际上无法使用，除了 div 未覆盖的一小部分。

我不明白其他 div 是如何变得如此广泛的，但这是我以后有时间时要弄清楚的事情：P

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

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

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

感谢大家的帮助！

于 2012-07-05T12:37:41.070 回答