HTML Image Maps - XIII

Image maps are images with clickable areas (sometimes referred to as "hotspots") that usually link to another page. If used tastefully, image maps can be really effective. If not, they can potentially confuse users.

To create an image map:

1. First, you need an image. Create an image using the usual method (i.e. via an image editor, then save as a gif or jpeg into your website's image folder).
2. 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
3. Use the HTML img tag to link to this image. In the img tag, use with the usemap attribute to define which image map to use (the one we just specified).

Image Map Example

HTML Code:

<img src ="/pix/mueller_hut/mueller_hut_t.jpg"
width="225" height="151" border="0"
alt="Mueller Hut, Mount Cook, and I"
usemap ="#muellermap" />

<map id ="muellermap"
name="muellermap">
  <area shape ="rect" coords ="90,80,120,151"
  href ="javascript:alert('Me');"
  alt="Me" />
  <area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
  href ="http://en.wikipedia.org/wiki/Mount_Cook"
  alt="Mount Cook" />
  <area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80"
  href ="http://www.natural-environment.com/places/mueller_hut.php"
  alt="Mueller Hut" />
</map>

This results in:

OK, compared to our previous lessons, this code is looking quite complex. However, once you really study it, it is not that complex. All we are doing, is specifying 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 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.