The address for this web page is: http://fishcaro.crosswinds.net/day_29_imagemaps.htm
On to the next lesson! Back to the COURSE SYLLABUS

29. INTRODUCTION TO IMAGEMAPS

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!

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.

INDEX CARD #29:

INTRODUCTION TO IMAGEMAPS (29a)

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:

http://www.wnyweb.com/features/websites/nav.html 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!

CLIENT-SIDE IMAGEMAPS (29b)

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

WORKSHEET #29:

(W29.1) Please read Chapter 2 (Image Attributes) and do all the exercises at the end of Chapter 2. This is all review material, so it should go rather quickly. http://www.cwru.edu/help/wilbur/toc.html (link is no longer valid)
(W29.2) Please begin Chapter 3 (Image Mapping); read through the introduction and the sections entitled "BUT FIRST..." and "MAP." http://www.cwru.edu/help/wilbur/toc.html (link is no longer valid)
(W29.3) The author of this tutorial has been pleased with the following imagemap creation shareware by Tom Boutell, called "MapEdit." It's easy to use, affordable, and available for both Windows and Macs. You can download an evaluation copy at the address given below: http://www.boutell.com/mapedit/

ASSIGNMENT #29:

(A29.1) Please read pages 137–141 (up to "Server-Side Imagemaps") in the Weasel Book. This information will be discussed in more detail in the next lesson.
(A29.2) Begin thinking about an imagemap for your homepage. Find the image you want to use, and put the appropriate <IMG> tag into your homepage. You'll be turning this image into an imagemap!