Sample client-side image map
Another sample image map, from HTML Goodies:
Server-side image map
Until recently, server-side image maps were the de facto standard on the Web. "Server-side" means that this type
of image map requires software on the web server to work. Depending on the server to interpret each click
and serve up the appropriate HTML file makes these image maps a little slower than client-side image maps.
Client-side image map
A client-side image map is an image map that is run by the browser rather than the web server. When your browser
requests a page that contains a client-side image map, all the information needed to run that map comes down with the page.
An advantage of client-side image maps is that they allow users to preview URLs before following a link. In server-side image maps,
the status bar at the bottom of the browser displays only coordinate points when the user mouses over the image. But client-side
image maps automatically display the target URL of the region the person's mousing over.
Don't forget text-only browsers
Only users with graphical browsers can display image maps. To enable Lynx users to access your page,
provide a list of the image maps choices (links) as text links on the same page or on an alternative page that is
accessible. For those with slow connections and those who turn off auto-display of images in their browser, text
links are important alternatives.
Cover your bases -- employ client- and server-side
Below is a line of HTML linking to a server-side map.
<img src="my_image.gif" ismap width=160
To make this link look around for a client-side map, just add the usemap="#foo_map" modifier to its <img> tag.
<img src="my_image.gif" usemap="#my_image_map"
width=160 height=140 border=0 ismap></a>
In browsers that understand the usemap= modifier, the <img> tag will look for a map file before it lets
the <a href> look for one. Other browsers, however, will ignore the usemap= modifier, read the ismap
modifier, and go straight to the <a href>. It's important to place the ismap modifier last, so that compliant
browsers will be sure to pick up usemap first.
The one image per link approach
Another option to support text-only access is to break up an image into smaller, individual graphic
files -- each linking to a separate page. This is most useful with graphical navigation bars
(like the ones at the top and bottom of this page). If each smaller graphic has descriptive text in an ALT element,
the user will know which link to follow. This approach also eliminates the need for an image map.
Just associate an <a href> tag with the <img> tag.
Always provide an ALT element
Provide a description for each link in an image map. Always.
Links on image maps: