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.

<MAP> and </MAP> - denotes the beginning and end of the map in an html file
<AREA> - uses the attributes SHAPE, COORDS. HREF to specify within the map, each selectable area and its associated URL.
USEMAP - was added to <IMG> for declaring the name of the map associated with the image specified by the attribute SRC= within the the same <IMG> tag .

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

<TITLE>An Image Map Test</TITLE>

</HEAD><BODY>

<H1>An Image Map Test</H1>

<img src="/grp/scs/orgchart.gif" align="center" usemap="#chart">
<map name="chart">
<area shape="rect" HREF="/grp/scs/mission.html" coords="264,1,438,24">
<area shape="rect" HREF="/grp/scs/net/networking.html" coords="408,80,527,107">
<area shape="rect" HREF="/grp/scs/net/netfolks.html" coords="364,107,551,310">
<area shape="rect" HREF="/comp/intro/scsc/service.frame.html" coords="286,453,344,541">
</map>

</BODY></HTML>

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
Method	Type	Required Coordinates
circle	circle	2 pairs: center, edge point
oval	oval	2 pairs: upper_left, lower_left
rect	rectangle	2 pairs: upper_left, lower_right
poly	polygon	poly means many side; up to 100 pairs can define the vertices ("points) of the shape
point	point	1 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