Question

How can I add an <area> inside of an <a> tag inside of a image map <map> and still have Firefox show the image map?

If im doing this:

<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 will ignore the whole <map>, Chrome however will not. Can I make it so that Friefox does not ignore it?

I'm using a plugin for Wordpress so that when a <a> tag is used it will open that image as a pop-up instead of loading the image in the current 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> tag?

2 个答案: