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

【问题标题】：Using an image map and a link on the same image在同一图像上使用图像映射和链接
【发布时间】：2014-01-27 11:30:32
【问题描述】：

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

但是，当他们点击背景（即不在地图的任何区域）时，我希望他们进入背景 URL。

所以我的代码看起来像这样 (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。

但是，在 IE（已测试到 IE10）中单击 img 但在 area 之外单击什么也不做。它确实在左下角显示了 URL 提示，但它没有跟随 a 标记。

有没有办法解决这个问题？

【问题讨论】：

标签： html anchor imagemap area

【解决方案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 的故障。

【讨论】：