我可以把一个图片映射区域放在<a>标签里面吗？

Question

如何在图像地图<map>中添加一个 <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不会。 我能让Firefox不再忽略它吗？

我正在使用一个WordPress插件，当使用<a>标签时，它将以弹出窗口的形式打开该图像，而不是在当前窗口中加载图像。

- TheButchersBoy

---

这个HTML无效，可能是在<area>元素上有一个target但没有href。为什么不直接删除<a>并将href放在<area>上呢？ - spectras

我在使用WordPress的一个lightbox插件，所以当我有一个<a>标签时，它会将图像作为弹出窗口打开。如果我在<area>标签内部有一个href，则它将在自己的页面中打开图像而不是作为弹出窗口:/ - TheButchersBoy

Answer 1

花了我一段时间，但我终于搞定了。

感谢Gaurav Rai的建议，

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

然后创建一个带有id的锚点<a>标签。我的是20000Anchor

接下来编写一个脚本，获取锚点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中使用。

- TheButchersBoy

Answer 2

通过你的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>

- Gaurav Rai

---

我正在使用WordPress的一个lightbox插件，这样当我有一个<a>标签时，它会将图像作为弹出窗口打开，而不是将用户重定向到另一个页面。我能否使用JavaScript函数来实现这一点？ - TheButchersBoy

你肯定可以用jQuery或JavaScript来完成。只需根据您的需求修改函数即可。即使您正在使用lightbox，我认为它应该有使用类或ID的选项。如果是，则将ID或类分配给您的区域。 - Gaurav Rai