HTML map and area not showing up

Question

I've been trying to place a map over a picture to make it clickable, however, the area is not working. When i inspect the page with chrome developer tools it is shown as a 0x0 area. Here is the code.

<div class="col-sm-12 col-xs-12">
  <img class="img-responsive envia" src="assets/envviar.png"  usemap="#Map" >
  <map name="Map" id="Map">
    <area shape="rect" coords="200,200,200,200" href="#" alt="aqui">
  </map> 
</div>

The section that i want to be clickable is where it says "AQUI".

I added the ID because i saw some recommendations that it was needed in some browsers like IE. Thanks.

`shape="rect" coords="200,200,200,200"` describes a rectangle whose corners are all the the same position, so it takes no space.... — Johannes, Mar 17 '17 at 16:55

APAD1 · Accepted Answer · 2017-03-17T16:53:48.533

4

Your coords are incorrect:

<div class="col-sm-12 col-xs-12">
  <img class="img-responsive envia" src="https://i.stack.imgur.com/FRpHw.png"  usemap="#Map" >
  <map name="Map" id="Map">
    <area shape="rect" coords="530,248,575,270" href="#" alt="aqui" />
  </map> 
</div>

This online tool will make it easy to generate coords for your areas.

The reason your coords aren't working is because you set the same coordinates for all 4 points, which means your area had no size. For a rect area, the 4 coordinates are the horizontal/vertical position of the top left corner and the bottom right corner, so they need to be different values.

edited Mar 17 '17 at 16:53

answered Mar 17 '17 at 16:42

APAD1

13,509
8
43
72

This worked perfectly and yes, it was because of the coords. However, on small screens it wont work. But jquery can be used to change the coords for small and XL screens. – Paco Meraz Mar 17 '17 at 17:43
2

Yeah, I would use this library to resolve that issue: https://github.com/davidjbradshaw/image-map-resizer extremely easy to implement. – APAD1 Mar 17 '17 at 18:02

score 1 · Answer 2 · answered Mar 17 '17 at 16:43

1

You need to define the size of the image for image maps to work which means it wont be responsive. You are better off looking at a plugin to make it work the way you are trying. On a side note Chrome dev tools doesnt show its location but it is exactly where you set it to be if you hover your mouse you will see it.

I would suggest https://github.com/stowball/jQuery-rwdImageMaps to get the responsive design you are looking for.

This got down voted? but I am correct, so regardless of you not liking my answer its true.

answered Mar 17 '17 at 16:43

IDED

174
2
10

Sorry, i didn't downvote. I was looking for another way to solve it with Jquery but it actually works the way APAD said. It might not move by itself depending on the screen size but now I can use jquery $(window).width() to redefine the coords depending on the screen size. – Paco Meraz Mar 17 '17 at 17:42

HTML map and area not showing up

2 Answers2