An image map is a combination of an image with a bit of HTML code that designates certain parts of the image as "clickable" hypertext links. The HTML for an image map consists of two parts:

1. The map code - which includes coordinates and the map ID.
2. The image tag - with map ID inserted.

Source:

<map id="treasure-map" name="treasure-map">

<area shape="rect" coords="97,75,142,106" href="http://geology.com/rocks/">

<area shape="rect" coords="48,38,87,76" href="http://www.palms.org/">

<area shape="rect" coords="120,17,155,50" href="http://www.imdb.com/title/tt0106179/">

</map>

<img usemap="#treasure-map" src="map.gif" width="189" height="155" border="0" alt="Treasure Map">

Web page:

In the above "Treasure Map" (not an obvious example or anything), clicking the rock, the tree, or the letter X will each take you to a different place. The coordinates for the above map look like this:

Overlaid on the image, they would look like this:

The image tag for a mapped image is the same as a standard image tag with the addition of the usemap attribute and the map ID:

There are several software packages that include tools for creating image maps but, unless you already own one of them, it is as easy to make them in Photoshop.

Making an image map using Photoshop:

1. Open the image that you want to map, in this case, a simple rectangle (we want the blue area to be a clickable link):

2. Place the cursor crosshairs at the top-left and bottom-right of the rectangle:

3. Note the x and y coordinates for top-left and bottom-right corners:

4. Create the map code:

5. Add usemap="#your-map-ID" to your image tag and put both the map code and image into your page:

Source:

<map id="blue_rectangle_map" name="blue_rectangle_map">
<area shape="rect" coords="25,50,125,100" href="someURLsomewhere" >
</map>

<img usemap="#blue_rectangle_map" src="blue_rectangle.jpg" width="150" height="150" alt="rectangle_plain" />

Web page:

Mouse over above image to observe the mapped area.

Circles

Circles are done as above but they only require one set of coordinates plus one for radius.

Using Photoshop, you determine the x and y coordinates of the center of the circle and then whatever diameter you want it to be:

Source:

<map id="blue_circle_map" name="blue_circle_map">
>area shape="circle" coords="75,75,45" href="someURLsomewhere" />
>/map>

<img usemap="#blue_circle_map" src="blue_circle.jpg" width="150" height="150" />

Web page:

Polygons

Polygons need one pair of coordinates for each point on the polygon.

Using Photoshop, you determine the x and y coordinates for each polygonal point:

Source:

<map id="blue_polygon_map" name="blue_polygon_map">
<area shape="poly" coords="21,77,82,52,128,79,105,114," href="someURLsomewhere" />
</map>

<img usemap="#blue_polygon_map" src="blue_polygon.jpg" width="150" height="150" />

Web page:

As in the "Treasure Map" example at the top of this page, you can create as many map "hotspots" in an image as you need.