Any comments: e-mail me, feedback or show your appreciation

Image Maps

Image maps are graphics which direct you to resources or locations by clicking on areas of the image. There are two types; server-side and client-side. With both kinds of image map, you display the image as normal using the <img> tag. You also provide a map of the graphic to tell the browser which coordinates of the image lead to which location.

The difference between the two types is that server-side image maps require your access provider to have the relevent processing script to interpret the map coordinates. This means the user must be on-line for the image map to function, it also means that they will work whichever browser is used. Conversely, client-side image maps are interpreted by the browser itself, implying that the image map will only function with a compatible browser. Netscape 2, Microsoft Internet Explorer and Mosaic can all interpret client-side image maps, I would therefore recommend client-side as the way to go. Below, you will find guides to employing server-side and client-side image maps.

Client-Side Image Maps

Having chosen a suitable image, you need to display the graphic on the screen and tell the browser that it is an image map. To do this you use the <img> element with the usemap attribute. You then need to write a map file. A map file tells the browser which areas of the image lead to which destination. Map files can be written in any text editor and can be included at the end of the <body> section of an HTML document (my prefered method) or as a separate file, often in the same location as the graphic.

The following example of an image map lets you jump to a search engine of your choice and will be explained afterwards, so don't use it yet!

The code to display this particular image map is:

<IMG BORDER=0 SRC="graphics/engines2.jpg"
USEMAP="#engines2">

The usemap attribute contains the location of the map file and uses the same syntax as the href attribute of the <a> element. In this case the corresponding map file, engines2, is contained within the HTML document and a # is used to indicate this. If the map was contained separately in a graphics directory, the usemap attribute could read usemap="graphics/engines2.map".

The map file, engines2, is:

<map name="engines2">

<area shape="rect" coords="2,3,86,30" TARGET="_top"
href="http://www.yahoo.com/">

<area shape="rect" coords="94,3,227,30" TARGET="_top"
href="http://inktomi.berkeley.edu/query.html">

<area shape="polygon"
coords="273,0,252,3,245,11,231,25,235,29,260,24,267,26,265,35,293,35,288,13"
TARGET="_top" href="http://www.woodhill.co.uk/setup/welcome.htm">

<area shape="default" nohref>

</map>

The elements of a map file are explained below:

`<map></map>`

name

name="text"
Provides a unique name for the image map file, as referenced by the usemap attribute of the <img> tag displaying the image map.

`<area>`

<area>

shape="rect | circle | poly | default"
Defines the shape of the live area as a rectangle, circle, polygon or the remaining undefined image. All but the latter require the coords attribute.
href="URL"
Used to specify the link destination for the live area.
coords="x1,y1,x2,y2 | x,y,r | x1,y1,x2,y2,x3,y3..."
Defines the precise position of the live area using coordinates in pixels separated by commas. A rectangle is described by coordinates of the top-left and bottom-right corners of the rectangle. A circular area is described by coordinates of its centre followed by its radius. A polygon is defined by coordinates of all the corners of the polygon. In the example, a ten-sided shape was used to approximate the duck's head. The coords attribute is required for the shape attribute, except when it is set to default.
nohref
Used to specify an area as not live. The example uses this attribute to define the area outside those specified to have no function.

There are a couple of ways to find coordinates of areas on your image. First of all, you could set the graphic as an image map as decribed above, but use the ismap (see server-side) attribute instead of usemap. Load it into your browser; move the mouse cursor over the image map and coordinates should be displayed at the bottom of your browser window (at least they are in Netscape). Simply jot down the coordinates corresponding to your hot area and type them into your map file. This procedure can also be performed using a graphics package such as the excellent Paintshop Pro. Client-side image maps can be automatically generated using the wonderfully simple MapEdit.

Server-Side Image Maps

Server-Side Image Maps are quite easy to set up, but require your access provider to have the relevent processing script.

Having chosen a suitable image you need to display the graphic on the screen and tell the browser that it is an image map. To do this you use the <img> element with the ismap attribute. You then need to place the image within a link to the relevent .map file. A map file tells the browser which areas of the image lead to which destination. The following example of an image map lets you jump to a search engine of your choice and will be explained afterwards, so don't use it yet!

The code to display the image map is:

<a href="graphics/engines2.map">

<img width=294 height=36 border=off ISMAP
src="graphics/engines2.jpg"></A>

The corresponding map file, engines2.map, is:

default special.htm

rect http://www.yahoo.com/ 1,1 85,26

rect http://inktomi.berkeley.edu/query.html 98,4 218,24

rect
http://www.compulink.co.uk/~woodhill/setup/http://www.woodhill.co.uk/setup/welcome.htm
230,1 287,33

Map files can be written in any any text editor and are often included in the same location as the graphic. By way of explanation, the file after default is the file the user is directed to if he/she clicks outside one of the specified areas. The text after rect (rectangle) contains the URL of the destination file followed by coordinates in pixels of the top-left and bottom-right corners of the relevent rectangular area on the image map.

There are a couple of ways to find coordinates of areas on your image. First of all, you could set the graphic as an image map, as decribed above, and load it into your browser. Move the mouse cursor over the image map and coordinates should be displayed at the bottom of your browser window (at least they are in Netscape). Simply jot down the coordinates corresponding to your hot area and type them into your map file. This procedure can also be performed using a graphics package such as the excellent Paintshop Pro.

For a little more help on image maps, try the CIX tutorial.