The address for this web page is:
On to the next lesson!


When you use an image as a link, the entire image becomes a link to a single document, regardless of where the user clicks. Sometimes, however, you want to use an image as a map; where clicking on different areas links you to different places. For example, try moving your mouse over Tanglewood, Lenox, and Eastover in the image of Lenox, Massachusetts (United States) below. You'll see that these areas are links to information about each place!

Tanglewood Information Lenox information Eastover information

An image used in this way is called an imagemap. Imagemaps are very easy to create with software designed for the purpose. (You can also create them "by hand," but that's a lot more work.) Today's lesson begins the exploration of imagemaps.



What is an imagemap? An imagemap (also seen as two words, "image map") is a single graphic image that contains more than one "hot spot." A "hot spot" refers to an area of an object that causes some action to take place when selected: each "hot spot" in a web imagemap takes the user to a different web page.

How are imagemaps used? Imagemaps are often used as navigational devices. Read about this sort of use at:
Imagemaps are also used to distribute additional information about parts of an illustration or map (as in the "map of Lenox" example above).
Some examples: a bowl of fruit; you get calorie counts as you click each fruit.
A flower garden; you get names and information as you click each flower.
A picture of a shelf of books: you get a story summary as you click on each book.
The possibilities are unlimited!


Are there different types of imagemaps? YES. There are two types of imagemaps: client-side and server-side. For client-side imagemaps, all the information needed to make the map "work" is contained right in the HTML document. For server-side imagemaps, some of the necessary information is supplied by the server (often by means of a CGI script). We'll only talk about how to create client-side imagemaps.
What are the advantages to client-side imagemaps?
-- They're self-contained within the HTML document, so you can test the imagemap on your own machine.
-- They cut down the load on the server and therefore improve response time.
-- They display complete URL information in the status bar when the mouse moves over a hot-spot. (Go to the "Lenox map" example above, put your mouse over "Lenox," and look at the status bar at the bottom of your screen.)
Are there any disadvantages to client-side imagemaps? Some early versions of Internet Explorer and Netscape Navigator don't support client-side imagemaps. Other browers also may not support them. However, these browsers make up only a tiny portion of the current browser population.

Printable version of Index Card 29a

Printable version of Index Card 29b



On to the next lesson!
© 2000 Carol J.V. Fisher    All Rights Reserved