Client-Side Image Map Tutorial

Implementing Client-Side Image Maps

Image maps are pictures that allow users to access different documents by clicking on different areas of the picture. Conventional "server-side" image maps are processed as follows:

When the user clicks on the image, the browser sends a request to the server, requesting the address of the document associated with the area clicked.
The server then sends back the information requested.
The browser then sends the server its request for the new document.

With client-side image maps, all of the map information can be specified in the same HTML file that contains the image. This has the following advantages:

The number of server hits is reduced, and links are resolved faster.
Destination links can be shown as the user's cursor moves over the map.
Image maps can be created and tested locally, without requiring a server.
Image maps can be accessed using protocols other than HTTP; conventional image maps only work with the HTTP protocol.
Image maps are not server-dependent, making them portable.

Creating a client-side image map

As an example, this procedure will show how a simple navigation bar (image.gif) can be used as a client-side image map. Each button will be mapped to a different document.

To create a client-side image map:

Add the image to your HTML document as an inline image.

<IMG SRC="image.gif">

Add the USEMAP parameter to the IMG element.

The USEMAP parameter specifies the name of the map definition associated with the image. For this example, the map definition is named demobar. Since the map definition is in the same file, a filename is not required.

<IMG SRC="image.gif"  USEMAP="img_maps.html#demobar">

Record the pixel coordinates of each region you want to define.

Pixel coordinates begin at 0,0 in the upper-left corner of the image. Most graphic editors can be used to display pixel coordinates.

Create a map definition.

<MAP NAME="demobar"> 

<AREA SHAPE="RECT" COORDS= "24,18,143,41" HREF="previous.html">

<AREA SHAPE="RECT" COORDS= "168,18,287,41" HREF="next.html"> 

</MAP>

Here is the completed example:

As you move the pointer over a mapped region, the URL of the document associated with the region is displayed in the status message area. This visual feedback allows users to know what regions are mapped as well as the document that will be loaded.

Server-side image maps cannot display this information because the URL information is located on the server and is not available until after the image has been clicked.

There are a few software programs out there that will create the Image-map HTML code for you. Check out our tools section for links to them.