Question

我有动态生成的图像映射的图像。我希望用户能够点击地图并进入<area href=属性。

然而，当他们点击背景（即不在任何地图的区域）时，我希望他们转到后台网址。

所以我的代码看起来像这样（fiddle）：

<a href="fromAnchor.html" target="_blank">
    <img src="image.png" usemap="#test" />
</a>

<map name="test" id="test">
    <area href="fromMap.html">
</map>

在Chrome / FX中，它可以正常运行 - 如果我点击area标签的形状，我会被带到fromMap.html，如果我点击其他地方，我会被定向到fromAnchor.html。< / p>

然而，在IE（测试到IE10）中点击img但在area之外没有做任何事情。它确实会在左下角显示网址提示，但不会跟随a标记。

有解决方法吗？

Answer 1

我提出了一个解决方案，但它有点糟糕（所以能够很高兴看到更好的答案）。

我的解决方法是动态添加填充整个图像的后备<area>，让退出区域外的点击回退到它：

var msie = /MSIE/.test(navigator.userAgent);
if (msie)
{
    // Don't do this hack twice
    $('map[data-iehack!="1"]').each(function ()
    {
        // First find the image this map applies to
        var $this = $(this);
        var name = $this.attr('name');
        var $img = $('img[usemap="#' + name + '"]');

        // Then find if the image is in an <a> tag
        var $link = $img.parents('a');
        if ($link.length > 0)
        {
            // If there is an <a> add an extra <area> that fills the image
            var wrapLink = $link[0].href;
            var width = $img.width();
            var height = $img.height();
            var $fallbackArea = $('<area shape="rect" coords="0,0,' + width + ',' + height + '" />');
            $fallbackArea.attr('href', wrapLink);
            $this.append($fallbackArea);
        }

        // Flag this map so we don't add it again
        $this.attr('data-iehack', '1');
    });
}

这个例子在jQuery中，但是主体应该在其他框架中工作。

必须有一个比这更好的方法 - 这个黑客必须检查浏览器，因为我无法弄清楚如何在这里检测IE的失败。

在同一图像上使用图像映射和链接

1 个答案: