Client Side Imagemaps

Last update: 5 June, 1996

Image Maps are interactive graphical maps or clickable images. They allow the user to click on a specific area or hot spot to access another HTML document or activate a script of one kind or another. Image maps use a mapping process to define specific shapes in the image that correspond to a defined action. The graphic itself is the same as other graphics in your documents, except the clickable areas have been programmed for a certain response.

A proposed extension to HTML is Client-Side Imagemaps. These have the same functionality as current imagemaps, but the map definition is interpreted locally by the browser, instead of by the remote server. This results in far more efficient, resulting in faster imagemaps. Netscape Navigator 2.0 and Internet Explorer 2.0 support client-side imagemaps, and other browsers may follow suit.

Step 1: Get the coordinates of the hot spots on the Imagemap

To determine the pixel coordinates of the boundaries of the hot spots in the graphic, on Unix I use xv. For other tools (including other platforms) checkout Yahoo's Imagemaps entry.

Step 2: Create the HTML page to reference the Imagemap

This is a short list of the tags and what they do.

Below you will find the HTML markup for a clientside map file.

Step 3: Try it

Using Netscape 2, move the mouse over SLAC Computing Services and note the cursor change shape to indicate you are on a hot spot. When on a hot spot depress the left mouse button and you should go to the appropriate Web page.

An Image Map Test

You can provide support for client-side imagemap challenged browsers by embedding the usemap reference in a non-image map reference, for example:

<a HREF="orgchart.html"> <IMG SRC="orgchart.gif" usemap="#chart"></a>

Possible Imagemap Shapes

Defining Hot Spot Methods
MethodTypeRequired Coordinates
circlecircle2 pairs: center, edge point
ovaloval2 pairs: upper_left, lower_left
rectrectangle2 pairs: upper_left, lower_right
polypolygonpoly means many side; up to 100 pairs can define the vertices ("points) of the shape
pointpoint1 pair: the_point
*These tables were found in " Using HTML, Special Edition" by Tom Savola

Further Information

See USF's tutorial on Image Maps - Creating and Using.
Les Cottrell