Search code examples
htmlimagemap

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.

Solution

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