0

出于某种原因，如果我将“onmouseover”作为参数，则无法单击此图像以显示幻想框：

<area onmouseover="toggleOverlay('SteWoz',1);" id="locSteWoz" alt="Test" class="fancybox" coords="24,51,236,244" href="http://www.google.com" rel="iframe" shape="rect" title="Test">

编辑：这就是 toggleOverlay 所做的：

<script>
    function toggleOverlay(name, newState){
        var element = 'imgOverlay' + name;
        var newDisplay

        if (newState == 0) {newDisplay = 'none'}
        if (newState == 1) {newDisplay = 'block'}           

        document.getElementById(element).style.display = newDisplay;
        //document.getElementById(element).style.z-index = '5';

            $(element).hide().fadeIn(4000);
    }
</script>

如果我删除“onmouseover”它工作正常。我怎样才能解决这个问题？

詹姆士

4

1 回答 1

0

首先，这一行：

$(element).hide().fadeIn(4000);

... 并没有真正做任何事情，因为此时element仍然需要一个正确的符号（#或.）来定义选择器，所以在这种情况下应该是：

$("#" + element).hide().fadeIn(1000);

其次，如果您在使用该图像的图像上覆盖另一个图像map，我假设您在此JSFIDDLE中所做的事情，

...那么您无法“使叠加层不响应任何点击，以便可以点击下面的图像”。

但是，您可以做的是使叠加图像使用与下图相同map的图像，因此，在您的toggleOverlay()函数中，您可以调整此行

$("#" + element).hide().fadeIn(1000);

...进入这个

$("#" + element).hide().fadeIn(1000).attr("usemap", "#Map");

...假设您的 html 看起来像

<map name="Map" id="Map">
    <area onmouseover="toggleOverlay('SteWoz',1);" id="locSteWoz" class="fancybox" shape="square" coords="0,0,415,319" href="{target}" title="title" alt="alt" />
</map>

... 否则使用标签的相应 ID map。

查看更新的 JSFIDDLE

于 2013-04-11T18:11:58.683 回答