HTML - Image Maps

     
Image maps are images with clickable areas (sometimes referred to as "hotspots") that usually link to another page.
If used appropriately, image maps can be an effective means for your users to find out more information about an item represented in the image. They can click different parts of the image to open a web page related to that part.
To create an image map:

  • Add the <img> Tag

    Embed the image into the page using the usual method (via the <img> element).
    Of course, the image must be available on the web first. You can either upload it or reference an existing image. It can be a photo, icon, logo, stock image, etc. Any image is fine.

  • Add the Map

    Use the HTML <map> tag to create a map with a name. Inside this tag, you will specify where the clickable areas are with the HTML <area> tag.

  • Link them with the usemap Attribute

    This bit links the map with the image.
    Add the usemap attribute to the <img> tag. The value must be the name of the map, preceded by a hash (#) symbol.
    For example if the map has name="pluto" then you should use usemap="#pluto" in the image.

Image Map Example

<!-- Image -->
<img usemap="#aus-nz" src="/pix/examples/australia-nz-map.gif" width="200" height="142" 
alt="Map of Australia and New Zealand">

<!-- Map -->
<map name="aus-nz">
    <area shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" href="http://www.travel-explorer.com/category/places/australia/" target="_blank" alt="Australia">
    <area shape="poly" coords="180,85,200,98,167,142,157,138" href="http://www.travel-explorer.com/category/places/new-zealand/" target="_blank" alt="New Zealand">
</map>
OK, compared to our previous lessons, this code is looking quite complex. However, once you study it, it is not that complex. All we are doing, is adding an image, then we are creating a map with coordinates. The hardest part is getting all the coordinates right.
In our example, we use the <area> tag in conjunction with the shape and coord attributes. These accept the following attributes:
shape
Defines a shape for the clickable area. Possible values:
  • default
  • rect
  • circle
  • poly
coords
Specifies the coordinates of the clickable area. Coordinates are specified as follows:
rect
left, top, right, bottom
circle
center-x, center-y, radius
poly
x1, y1, x2, y2, ...
You can use the above attributes to configure your own image map with as many shapes and clickable regions as you like.