CODEWITHSUNDEEP
htmlimagemap
Paco Meraz
Paco Meraz

Reputation: 497

HTML map and area not showing up

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>

sample image

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.

Upvotes: 3

Views: 5807

Answers (2)

APAD1
APAD1

Reputation: 13666

Your coords are incorrect:

<div class="col-sm-12 col-xs-12">
  <img class="img-responsive envia" src="https://i.sstatic.net/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.

Upvotes: 4

IDED
IDED

Reputation: 194

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.

Upvotes: 1

Related Questions