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

【问题标题】：Can I add an image map area inside of an <a> tag?我可以在 <a> 标记内添加图像映射区域吗？
【发布时间】：2015-12-21 14:28:35
【问题描述】：

如何在图像映射 <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 不会。我可以让 Friefox 不忽略它吗？

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

【问题讨论】：

此 html 无效，您可能在 <area> 元素上没有 target 但没有 href。为什么不直接删除<a> 并将href 放在<area> 上？
我正在使用我认为 wordpress 的灯箱插件，所以当我有一个标签时，它会以弹出窗口的形式打开图像，如果我在标签内有一个 href，它将打开图像在其自己的页面中，而不是作为弹出窗口：/

标签： html firefox imagemap

【解决方案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>

【讨论】：

我正在使用我认为的 WordPress 灯箱插件，这样当我有一个标签时，它会以弹出窗口的形式打开图像，而不是将用户引导到另一个页面。我可以使用 JavaScript 函数来执行此操作吗？
当然你可以用 jQuery 或 javascript 来做。只需根据您的需要修改功能即可。即使，如果您使用的是灯箱，我认为，它应该可以选择使用类或 id。如果是，则为您的区域分配 id 或类。

【解决方案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 一起使用

【讨论】：