Can I add an image map area inside of an 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

This html is invalid, you may not have a `target` but no `href` on an `` element. Why don't you just remove the `` and put the `href` on the ``? — spectras, Sep 24 '15 at 05:05
im using i think a lightbox plugin for wordpress so when I have an tag it will open the image as a pop up, if I have a href inside the tag it will open the image in its own page and not as a pop-up :/ — TheButchersBoy, Sep 24 '15 at 05:28

score 2 · Answer 1 · answered Sep 24 '15 at 05:18

2

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>

answered Sep 24 '15 at 05:18

Gaurav Rai

900
10
23

im using i think a lightbox plugin for WordPress so that when I have an tag it will open the image as a pop up instead of directing the user to another page. Could I use a JavaScript function to do this? – TheButchersBoy Sep 24 '15 at 05:38
definitely you could do it with jQuery or javascript. Just modify the function according to your needs. Even, if you are using lightbox, I think, it should be having options to use class or id. If yes then assign id or class to your area. – Gaurav Rai Sep 24 '15 at 05:49

score 2 · Accepted Answer · answered Sep 24 '15 at 07:09

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

Can I add an image map area inside of an tag?

2 Answers2