(There are examples at the bottom of the page, to use as a reference.)

First you need to create the map. You need some sort of graphics program to tell you the coordinates of the various points on the picture (in pixels).

To do this using rectangular shapes:

1. Decide what areas on the image you want to refer to what.
2. Find out the x and y coordinates of the top left of the first map rectangle, eg. (x1,y1)=(11,0)
3. Find out the x and y coordinates of the bottom right of the first map rectangle, eg. (x2,y2)=(96,94)
4. Find out the similar coordinates for the other rectangles on the imagemap.

For a circular shape:

1. Again, determine where you want the circle to be on the image.
2. Determine the coordinates of the center of the circle, eg. (x1,y1)=(61,48)
3. Determine the radius of the circle, eg. r1=42.

   You can do this by a) finding the right hand point on the circle and its x-coordinate (here it is 103), then b) subtract the x-coordinate of the center of the circle, x1. eg. 103-x1 = 103-61 = 42

1. Determine the shape and placement of the area.
2. Determine the coordinates of each corner on the polygon, eg. (x1,y1)=(38,22), (x2,y2)=(60,13), (x3,y3)=(77,21), etc....
3. Go around the shape and keep the coordinates in order.
4. The map will connect the dots.

Now that you have the coordinates of the shapes, you can make a list which will tell the browser where on an image the different areas can be found.

1. Start the map with the tag (put in whatever name you want):

   <map name="mapname">

2. Then for each part of the image map, you need an area tag. If you have 3 links attached to three different areas on the picture, you would need one area tag for each one of these:

   <area shape="rect" coords="11,0,96,94" href="http://www.austen.com/tutorial/blue.htm">

   • For rectangular areas use: shape="rect",
     for circular areas use: shape="circle", and
     for polygonal shapes use: shape="polygon".

   • The coordinates are then put in.
     For rectangles they go in as coords="x1,y1,x2,y2",
     for circles they are coords="x1,y1,r1", and
     for polygons they are coords="x1,y1,x2,y2,x3,y3,x4,y4,etc..."

   • Then you put in the familiar href="URL" tag.

   • Note: If areas overlap, then the first one on the list will take precedence.

3. Then you can close the map tag.

   </map>

4. Once the map has been made you can add the image to the document.

   <img src="http://www.austen.com/tutorial/imgmap1.gif" usemap="#mapname" border=0>

   • Here the border=0 eliminates the usual border around a linked image.
   • The difference between this image tag, and a generic image tag is just the usemap="#mapname"
   • It is possible to have the map be in a different file, in which case the usemap tag would take the url of that page: usemap="http://www.server.com/folder/filename.htm#mapname" (Though, I have never gotten this to work.)

Demonstrations:

For rectangular shapes:

<img src="http://www.austen.com/tutorial/imgmap1.gif" usemap="#demomap" border=0>

<map name="demomap">
<area shape="rect" coords="11,0,96,94" href="http://www.austen.com/tutorial/blue.htm">
<area shape="rect" coords="96,0,174,94" href="http://www.austen.com/tutorial/red.htm">
<area shape="rect" coords="174,0,255,94" href="http://www.austen.com/tutorial/pink.htm">
</map>

Results in (I drew on the lines to show the shapes, but on imagemaps they are invisible):

For the circular shapes:

Note that here the full URL is not used, but only the relative one. Since the link is to a file in the same directory, all you need is the file name, not the entire address (http://...etc.)

<img src="http://www.austen.com/tutorial/imgmap1.gif" usemap="#demo2" border=0>

<map name="demo2">
<area shape="circle" coords="61,48,42" href="blue.htm">
<area shape="circle" coords="138,48,35" href="red.htm">
<area shape="circle" coords="211,48,38" href="pink.htm">
</map>

Results in (I drew on the lines to show the shapes, but on imagemaps they are invisible):

And for the polygonal shapes:

In this example the addresses are given in short hand. When an address begins with a slash "/", then the "http://www.austen.com" part of the address is assumed to come before it.

<img src="http://www.austen.com/tutorial/imgmap3.gif" usemap="#demo3" border=0>

<map name="demo3">

<area shape="polygon" coords="38,22,60,13,77,21,86,36,80,60,35,61,27,39" href="/tutorial/blue.htm">

<area shape="polygon" coords="104,20,170,15,168,65,93,67" href="/tutorial/red.htm">

<area shape="polygon" coords="203,3,223,13,236,48,220,67,180,52,181,4" href="/tutorial/pink.htm">

</map>

Results in (I drew on the lines to show the shapes, but on imagemaps they are invisible):

© 1998, 1999, 2000 Copyright held by Ann Haker.