The obvious downside to server-side image maps is that they require a server. That means you need access to the required HTTP server or its /cgi-bin/ directory, which isn’t always available. And server-side image maps limit portability, since not all image map processing applications are the same.

Server-side image maps also mean delays for the user while browsing, since the browser must get the server’s attention to process the image coordinates. That’s even if there’s no action to take, such as a section of the image that isn’t hyperlinked and doesn’t lead anywhere.

Client-side image maps suffer from none of these difficulties. Enabled by the usemap attribute for the <img> tag, and defined by special <map> and <area> extension tags, client-side image maps let HTML authors include in their documents a map of coordinates and links that describe the sensitive regions of an image. The browser on the client computer translates the coordinates of the mouse position within the image into an action, such as loading and displaying another document. And special JavaScript-enabled attributes provide a wealth of special effects for client-side image maps.

To create a client-side image map, include the usemap attribute as part of the <img> tag. Its value is the URL of a <map> segment in an HTML document that contains the map coordinates and related link URLs. The document in the URL identifies the HTML document containing the map; the fragment identifier in the URL identifies the map to be used. Most often, the map is in the same document as the image itself, and the URL can be reduced to the fragment identifier: a pound sign (#) followed by the map name.

For example, the following source fragment tells the Netscape or Internet Explorer browser that the map.gif image is a client-side image map and that its mouse-sensitive coordinates and related link URLs are found in the map section of the document named map:

<img src="pics/map.gif" usemap="#map">