Before we get into the nitty-gritty of creating client-side imagemaps in HTML, I want to explain the difference between server-side and client-side imagemaps.
Years ago, before HTML had embraced imagemaps, there was special software on every web server which ran "server-side" imagemaps. The user would click on an image on a web page attached to one of these server-side imagemaps (using the ISMAP
attribute of the IMG
tag), which would call the web server software to analyze the precise location on the image where the user clicked, and serve the appropriate HTML page based on the user click. As you can imagine, these server-side imagemaps took precious time away from the web server's other duties (like serving HTML pages), which slowed down already-slow web servers.
Starting with HTML 2.0, client-side imagemaps were introduced as a part of the HTML standard. Client-side imagemaps placed all imagemap information into the HTML page, and were run completely by the web browsers, freeing up the web servers for more important operations.
Today, all major web browsers understand client-side imagemaps. The only web browser still in common use which does NOT understand client-side imagemaps is Lynx, the text-only browser (which doesn't even understand pictures).
As a courtesy to Lynx users, as well as to users who have their images turned off for faster browsing, it is important to DUPLICATE the navigation in an imagemap using a redundant text-based navigation system immediately below the imagemap, as in this simple example. Notice how every link in the imagemap is duplicated in the text navigation? This kind of redundancy keeps all areas of your website accessible to all users, and, again, is considered to be very good web "netiquette".
Copyright © 2001 Michael Masumoto. All Rights Reserved.