HTML <map> Tag

✂ 
<img src ="http://www.htmlcodes.ws/images/examples/australia-nz-map.gif" width="200" height="142" alt="Map of Australia and New Zealand" usemap ="#aus-nz">

<map name="aus-nz">
  <area shape ="poly" coords ="3,47,45,12,105,7,140,60,120,125,12,90" href ="https://en.wikipedia.org/wiki/Australia" target="_blank" alt="Australia">
  <area shape ="poly" coords ="180,85,200,98,167,142,157,138" href ="https://en.wikipedia.org/wiki/New_Zealand" target="_blank" alt="New Zealand">
</map>

How to Use the above Code

  1. Replace the image details with your own (i.e. replace the values of all attributes with those of your image and image map).
  2. Replace the image map details (i.e. replace the values of all attributes with those of your image map).

You can use the following shapes with image maps:

  • default
  • rect
  • circle
  • poly

Coordinates can be specified in the following ways:

  • rect: left, top, right, bottom
  • circle: center-x, center-y, radius
  • poly: x1, y1, x2, y2, ...

It might take a while to get the coordinates right (i.e. the coords attribute) but persistence is key.

How Image Maps Work

The <map> area represents the image map.

The <area> element represents the "clickable" area in an image map.

To create an image map, you need the following elements:

To create an image map, you need to place any <area> tags inside a <map> tag.

Now, any image that needs to use that image map can do so using the usemap attribute (its value being that of the image map to use).