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

Question

我怎么可以添加<area>一个内<a>标签的图像映射的内部<map>,仍然有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>标签时,它会将该图像作为弹出窗口打开,而不是在当前窗口中加载图像

Answer 1

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

感谢 Gaurav Rai 的建议，

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

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

然后编写一个脚本来获取锚点 id20000Anchor并通过 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 一起使用