HTML Basics: Client-side imagemaps

Introduction to imagemaps

An imagemap is a graphical way to present hyperlink information. Basically, the image contains locations the user can select, and he will be taken to a new document depending on the location he chose. Since this is usually only possible on a graphical browser, "clicking" and "selecting" have become synonyms for choosing locations on imagemaps.

The map is a collection of shapes, sets of coordinates, and locations. The imagemap processor uses this to determine which coordinates correspond to which destinations. Until recently, this processing script always ran on the server and not on the client.

Server-side vs client-side imagemaps

Running the processing script on the server has an obvious disadvantage. It's impossible to know where a specific location on the map will take you, as only the server knows that. This means the user doesn't get the feedback he normally gets when he is about to select a link.

Also, this method requires two network accesses; one to submit the selected location, and one to go to the corresponding document. Client-side imagemaps solve both problems. The map information is sent to the browser, so it can immediately determine where to go. This can then be shown to the user, who now gets the feedback he is used to.

Setting up the client-side map

A client-side imagemap is constructed with two new HTML elements: MAP and AREA. The MAP element specifies the map information, and it contains AREA elements for each hotzone in this map. An AREA element specifies the coordinates for a hotzone (area) of the map, the destination location and alternative text for non-graphical browsers.

The image

To display the actual image used for the map, you use the IMG element with a new attribute: USEMAP. This attribute points to the location of the map. It must contain an anchor, specifying the name you assigned to the map.

For example, <IMG SRC="mymap.gif" WIDTH=100 HEIGHT=50 USEMAP="#mymap"> would tell the browser the imagemap information for this image is at location "#mymap" in the current document.

Note that pointing to an imagemap outside the current document does not work in all browsers. Although this is a bug, try to embed the imagemap information in the same document as the image.

The MAP tag

The MAP tag is a "wrapper" for the areas which define this map. It has one attribute, NAME. The name of the map should be the same as the name to which the corresponding IMG tag points. Using the example above, you would use <MAP NAME="mymap"> for the imagemap belonging to that image.

The AREA tag

The AREA elements, inside the MAP, each set up one destination for an area in the imagemap. This area, or hotzone, is defined with the SHAPE and COORDS attributes. The COORDS attribute specifies the coordinates for the area, depending on the shape defined with the SHAPE attribute. Note that in an imagemap, (0,0) is the upper left corner, and (n-1, m-1) the bottom right corner of an image which is n pixels wide and m pixels high. Coordinates are separated by commas.

The SHAPE attribute specifies the shape of this area, and can be one of the following:

rect - rectangle

A rectangle has four coordinates. The first specifies the top left corner, and the second the bottom right corner of the rectangle. For example, <AREA SHAPE=rect COORDS="0,0,9,9"> would specify a rectangle of 10x10 pixels, starting in the top left corner of the image.

circle - circle

A circle is defined by its center and radius. The COORDS attribute first specifies the coordinates of the center, and then the radius of the circle, in pixels. For example, <AREA SHAPE=circle COORDS="10,10,5"> would specify a circle with radius 5 at location (10,10) in the image.

poly - polygon

A polygon is built up by a list of coordinates. They are all connected in the order you present, and the last coordinate pair is connected to the first. This way you can build arbitrary figures. For example, <AREA SHAPE=poly COORDS="10,50,15,20,20,50"> would specify a triangle, with edge locations (10,50), (15,20) and (20,50).

default - default

The default location doesn't have any coordinates, and it should be used only once in the map. It is used to indicate what should happen if the user selects one of the coordinates which are not defined in any of the other elements.

Each AREA tag should also have the HREF attribute, pointing to the destination for this area, or the NOHREF attribute. This attribute specifies that this area does not lead anywhere.

Also, ALT text must be supplied. This text will be shown by non-graphical browsers, and it will be linked to the URL specified in the HREF attribute if present. Note that if you do not supply ALT text, your document will not validate.

An example

In this example, the image below will be used as as client-side imagemap. I know it's an ugly image, but that's not the point right now. :-). To set up the imagemap, first determine all the areas and where they should lead to. Then, include the image and point it to the map.

<IMG SRC="imagemap.gif" WIDTH=176 HEIGHT=285 USEMAP="#mymap">

This image has four hotzones. The circle at the bottom, next to the "WDG" text, is the WDG logo and should take a user to the WDG main page. The two white triangles above it should go (from top to bottom) to the main index for the reference section and to the index for the HTML Basics series. The triangle on the right should go to the Wilbur index. And lastly, the red box at the top will go to the W3C's index on HTML. The rest of the image should not be clickable.

Determining the exact coordinates can be a tiresome task if you have to do it by hand. Fortunately, several programs to do this for you are available. You can use programs which create server-side imagemaps as well, although you'll have to do some editing to turn it into a proper client-side map.

The MAP part of this imagemap looks as follows:

<MAP NAME="mymap">
<AREA SHAPE="circle" COORDS="51,229,18" HREF="/" 
 ALT="WDG Home">
<AREA SHAPE="rect" COORDS="28,28,143,67" 
 HREF="http://www.w3.org/pub/WWW/Markup/" 
 ALT="W3C HTML reference">
<AREA SHAPE="poly" COORDS="28,133,28,74,134,102" 
 HREF="/reference/" ALT="Reference">
<AREA SHAPE="poly" COORDS="28,139,28,199,134,167" 
 HREF="/reference/basics/" ALT="HTML Basics">
<AREA SHAPE="poly" COORDS="38,136,143,165,143,135" 
 HREF="/reference/wilbur/" ALT="Tag overview">
<AREA SHAPE="default" NOHREF>
</MAP>

Be compatible

Not all browsers support client-side imagemaps. The best way to compensate for this is to supply a server-side imagemap as well. This can be done by wrapping the IMG tag inside an A tag, and adding the ISMAP attribute. The anchor should point to the imagemap on the server as usual. A browser which supports client-side maps will ignore the server-side map.