Area map not working

Question

I have a homescreen image that I need to have different sites linked to, but am still not able to make my area map work. I've tried reordering the and and double checking spelling. I have also double checked the coordinates. Thoughts?

<p><map name="epacbanner"> 
<area shape="rect" coords="0,336,156,489" href="https://www.google.com" 
alt="contact" />
</map> <img src="/content/epac%20banner_final.png" alt="epac banner" 
title="epac banner" width="960" height="322" img="" usemap="#epacbanner" />
</p>

Show us your code, contrary to popular belief the users here are not actually psychic :) — pokeybit, Jun 26 '17 at 19:32
Next time, place the code in your opening post. a moderator will probably fix that for you this time. — pokeybit, Jun 26 '17 at 19:33
If possible use an absolute URL for your image so we can see it too. — pokeybit, Jun 26 '17 at 19:35
Thanks for your help, I'm not a web developer, so I'm new to this. — becky armstrong, Jun 26 '17 at 19:41
The url is through a password protected site, so I can't send. And I tried updated my information to make it more minimal, complete, and verifiable. If I'm missing anything, please let me now. — becky armstrong, Jun 26 '17 at 19:42

score 3 · Answer 1 · answered Jun 26 '17 at 19:44

The problem is not with your HTML but the coordinate values, as you have specified a rect the first two coordinates are the x,y position of the top left corner of the shape. You have specified 336 for the y value when your image is in fact only 322 pixels tall (height) Changing that value to 0 places a rectangle at the top left of the sample image as shown in the second example below.

<p>
<img src="http://lorempixel.com/960/322" alt="epac banner" 
  title="epac banner" width="960" height="322" usemap="#epacbanner" />
  <map name="epacbanner">
    <area shape="rect" coords="0,336,156,489" href="https://www.google.com" 
  alt="contact" />
  </map>
  
</p>

<p>
<img src="http://lorempixel.com/960/322" alt="epac banner" 
  title="epac banner" width="960" height="322" usemap="#epacbanner" />
  <map name="epacbanner">
    <area shape="rect" coords="0,0,156,489" href="https://www.google.com" 
  alt="contact" />
  </map>
  
</p>

pokeybit, thank you so much! It worked. I so appreciate all your help!!! — becky armstrong, Jun 26 '17 at 20:02

Area map not working

1 Answers1