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

Took me a awhile but I got it.

Thanks Gaurav Rai for the suggestion,

I had to call a script in the href in the area element: href="javascript:getAnchor();"

then make a anchor <a> tag with an id. mine was 20000Anchor

then make a script which gets the anchor id 20000Anchor and activates it by 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>

The anchor <a> element / Lightbox can now be used with the image map and will work with Chrome and Firefox