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

Question

How can I add <area> inside the <a> tag inside the image <map> and still Firefox shows the image map?

If im does 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 entire <map> , however Chrome will not. Can I make Friefox ignore him?

I use the plugin for Wordpress, so when the <a> tag is used, it will open this image as a popup instead of loading the image in the current window

Answer 1

I had a little, but I understood.

Thanks Gaurau Rai for the offer,

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

then create a binding <a> with id. mine was 20000Anchor

then create a script that gets the binding identifier 20000Anchor and activates it by pressing ()

 <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> / Lightbox element can now be used with the image map and will work with Chrome and Firefox

Answer 2

According to your HTML, I think you are trying to make the zone clickable and redirect the user to a specific page. You cannot do this with the anchor tag. To do this, you need to call the javascript function, and in this function you can easily redirect.

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