Client-Side Imagemaps

The simplest image maps are the Client-side maps where all the instructions occur in the html file. This eliminates the need for a cgi to translate these cordinates as in the older Server-side image maps. Also the map file is not required. Some of the older browsers,however, dont recognise the tags used for these maps.

A very important benefit of client-side imagemaps is that you can test your hot spots or image maps on your local hard disk rather than on the server. Client-side maps also relieve the server from having to process this information.

The Map tag

<map name="mymap">
<area shape=rect coords="0,0,133,20" href="../index.htm">
</map>

In this example the name attribute simply gives a name to the definitions of the hot spots. This definition includes the shape information (rect) as well as the coordinates and corresponding URL or address.

The coords refers to the coordinates (in pixels) of the hot spot. In the diagram above the 3 rectangular hot spots are shown with coordinates at each corner. The first hot spot has the coodinates "0,0,133,20", the graphic is 400 pixels in width and 20 pixels in height.

So far only one file is involved, the html file marked up using the map tag. The second necessary file is, of course, the image file that the hot spots refer to. In this example it's called "mymap.gif"

<a><img src="mymap.gif" usemap="#mymap"></a>

Here is where the image is brought in. The usemap attribute tells the browser to use the information defined in the map tag and here given the name "mymap". If you dont want a border to show around the image then use the following:

<a><img src="mymap.gif" border=0 usemap="#mymap"></a>

Putting it all together

Client-side image maps require only 2 files.

1. The image file eg "mymap.gif"
2. The html file the browser reads eg "mymap.htm"

Copy the following and paste it into a text file, save as mymap.htm

Copy the gif file below and save it as mymap.gif (run your mouse over the image to see the hot spots)

Put both files in the same directory or folder and put the URL's you want to link to where it says address here in the mymap.htm file. Test it out.

The graphic above is working example of an image map. Run the mouse across the grahic to set the cursor change to a hand and the address change at the bottom of your browser. Click each of the 3 regions to see them work.

Imagemap Shapes

for rectangles use
<area shape="rect" coords="x1", "y1", "x2", "y2"> (x and y are coordinates of topleft and bottomright corners)

for circles use
<area shape="circle" coords="x", "y", "r"> (x and y are coordinates of the centre and r is radius of the circle)

for polygons use
<area shape="poly" coords="x1", "y1", "x2", "y2" , "x3", "y3" etc> (x and y are coordinates of each point on the polygon