我可以在 <a> 标签内添加图像地图区域吗？

Question

如何在图像映射 <a> 标签内添加 <area> 并且仍然让 Firefox 显示图像映射？

如果我这样做：

<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/>

<map name="progress">  
  <a href="http://yourmillionpixels.com/wp-content/uploads/2015/07/20000-goal.jpg">  
    <area  shape="rect" coords="152,648,308,673" target="_self"/></a>
</map>

Firefox 将忽略整个 <map>，但 Chrome 不会。我可以做到让 Friefox 不忽略它吗？

我正在使用 Wordpress 插件，这样当使用 <a> 标签时，它会以弹出窗口的形式打开该图像，而不是在当前 window

Answer 1

根据您的 HTML，我猜您正在尝试使区域可点击并将用户重定向到特定页面。你不能通过锚标签来做到这一点。为此，您需要调用一个 javascript 函数，在该函数中您可以轻松重定向。

<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/>

<map name="progress">  
    <area  style="cursor:pointer;" onClick="redirect('http://yourmillionpixels.com/uploads/2015/07/50000goal.png');" shape="rect" coords="152,648,308,673" target="_self"/>
</map>

<script>

function redirect(u)
{
    window.location.href=u;
}
</script>

Answer 2

花了我一段时间，但我明白了。

感谢 Gaurav Rai 的建议，

我不得不在 area 元素的 href 中调用脚本：href="javascript:getAnchor();"

然后制作一个带有 id 的锚 <a> 标签。我的是 20000Anchor

然后制作一个脚本来获取锚点 ID 20000Anchor 并通过 click()

激活它

<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/>

<map name="progress">  
    <area  href="javascript:getAnchor();" shape="rect" coords="152,648,308,673" target="_self"/></a>
</map>

<a href="http://yourmillionpixels.com/wp-content/uploads/2015/07/20000-goal.jpg" id="20000Anchor"></a>

<script> 
    function getAnchor(){
        document.getElementById("20000Anchor").click();
    }
</script>

锚 <a> 元素/灯箱现在可以与图像映射一起使用，并且可以与 Chrome 和 Firefox

一起使用

我可以在 <a> 标签内添加图像地图区域吗？

Can I add an image map area inside of an <a> tag?

html

firefox

imagemap