An image map is basically a GIF or a JPEG image that has mapped coordinates with instructions. For example if you click on one part of the image it will take you to one page, and another part of the same image would take you to some place else.

Ok below is an image map that I created...

Move your mouse over the image, you should notice 3 parts, one called Image Map 1, one called Image Map 2 and lastly one called Image Map 3. If you click on any of those 3, they will take you to a new page, try them and see ;o)

I created the image map using an application called Mapedit, it's shareware, you can find it on my downloads page, along with a few other useful tools.

There are two types of imagemaps, client-side and server-side. We will concentrate mostly on client-side maps which are usually used today, and are supported on Netscape 2.0 and Internet Explorer 3.0 and later.

Imagemaps use a "map" that is put over an image. This "map" needs to have areas defined by using rectangles, polygons, and circles. You need to make a map in your HTML file by using the <MAP> </MAP> tags.

An Example:

<map name="mapname"><!--put the coordinates and links here--></map>

Between these two map tags, you need to use another tag, the <area> </area> tag. The coordinate system for this tag starts at the upper left pixel of the image. There are three main types of <area> tags, they are all listed and explained below:

<area shape="rect" coords="x1,y1,x2,y2" href="url">

This will make a rectangle using points x1,y1 as the upper left corner and points x2,y2 as the lower right corner. "href" sets to what page the user will be taken to, just as the <a> tag does.

<area shape="circle" coords="x,y,radius" href="url>

In this tag, x,y are the coordinates of the center of the circle and 'radius' is the radius of the circle.

<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="url">

With the polygon tag you can make a polygon with as many sides as you want. This can be very helpful, but tedious to set up.

Here is another example of an image map that uses a circle, polygon, and rectangle:

To tell the browser what image to put the map onto, you need to define which image you want the imagemap on. You can do this by using the usemap attribute of the <img> tag.<img src="image.gif" usemap="#mapname">

Here is the HTML code for the imagemap above:

<img src="imagemap[1].gif" usemap="#map" width="175" height="75" border="0">
<map name="map">
<area shape=circle coords="26,26,22" href="1.htm">
<area shape=poly coords="62,32,41,64,93,64" href="2.htm">
<area shape=rect coords="114,32,171,70" href="3.htm">
</map>