Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

5.5. Image Maps

Image maps provide a method to map areas of images to actions. For example, a company Web site might want to provide a map of the United States that allows customers to click on a state to find a local office or store.

There are two types of image maps: client-side and server-side. Client-side image maps rely on the user agent to process the image, the area where the user clicks, and the expected action. Server-side image maps rely on the user agent only to tell the server where the user clicked; an agent on the Web server does all the processing.

Between the two methods, client-side image maps are preferred. The user agent is able to offer immediate feedback to the user (like being over a clickable area). Most user agents support client-side image maps. Server-side agents can also bog down a server if the map draws consistent traffic, hides many details necessary to provide immediate feedback to the user, and might not be compatible with some user agents.

If you want images to be clickable and take the user to one particular destination, you don't have to use an image map. Instead, embed the <img> tags in appropriate anchor tags (<a>) similarly to the following:

<a href="catpage.html"><img alt="Go to the cat page"
src="cat.jpg"></a>

5.5.1. Specifying an Image Map

A client-side image map's data (clickable regions) is specified within the contents of a <map> tag and linked to an appropriate <img> tag with the usemap attribute. For example, to specify a map for ...