Question

我正在尝试使用html图像映射创建带有叠加层的交互式地图。要查看它，请访问：http://www.surge.ca/testing/WFA2100/index.html

解释：

当您将鼠标悬停在地图的<area>上时，会显示带有链接的叠加层。为了防止叠加在移动时关闭，因为当您不再悬停在该区域上时，我在关闭叠加层之前使用setTimeout。

问题：

它在我的每个浏览器中都能像我想要的那样工作。在IE 7和8中，当您将鼠标悬停在另一个<area>上方的叠加层上时，它会立即切换到<area>的叠加层。

起初，我认为这是一个z索引问题，其中<area>的z-index高于叠加层，但我认为我的z-index设置正确。我也在想它可能只是IE处理图像映射的方式吗？

代码：

以下是设置事件的代码。

jQuery(function($){
    // binds mouseenter and mouseleave to <area>
    $('area').bind('mouseenter',function(){
        sectionNum = this.hash;
        sectionNum = sectionNum.replace(/#/,'');
        showOverlay(sectionNum);
        clearTimeout(timer);    
    }).bind('mouseleave', function(){
        timerClose();
    });

    $('.map_info').bind('mouseenter', function(){
        clearTimeout(timer);
    }).bind('mouseleave', function(){
        timerClose();
    });
});

// sets timer before closing to allow cancel
var timer;
function timerClose(){
    timer = setTimeout(function(){hideOverlay();},500);
}

Answer 1

问题是IE在悬停结束时清除setTimeout。我没有运行你的代码，但我有同样的问题，并通过将setTimeout函数作为字符串传递来修复它。

例如setTimeout(alert('hi'), 1000)没有处理在悬停状态下运行但setTimeout("alert('hi')", 1000)正在运行的函数。在您的代码中可能会替换

timer = setTimeout(function(){hideOverlay();},500);

与

timer = setTimeout("function(){hideOverlay();}",500);

解决问题。似乎IE运行的代码在全局范围内以字符串形式传递。

我也可以看到你的页面中有jQuery。有一个名为hoverIntent的jQuery插件，它的悬停延迟非常好。也许插件编写器编写了更多的跨浏览器代码。

让我知道它是否有效。：）

图像映射与覆盖不在IE中工作

1 个答案: