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

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

By your HTML I guess you are trying to make area clickable and redirect user to specific page. You cannot do this by anchor tag. For this you need to call a javascript function, and in that function you could redirect easily.

<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>