Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

226 LESSON 9: Using Images on Your Web Pages

What Is an Imagemap?

Earlier in this lesson, you learned how to create an image that doubles as a link simply by

including the <img> tag inside a link tag (<a>). In this way, the entire image becomes a

link.

In an imagemap, you can define regions of an image as links. You can specify that cer-

tain areas of a map link to various pages, as in Figure 9.18. Or you can create visual

metaphors for the information you’re presenting, such as a set of books on a shelf or a

photograph with a link from e ach person in the picture to a page with his or her biogra-

phy on it.

washington.html

minnesota.html

ohio.html

alaska.html florida.html

california.html

texas.html

HTML5 supports the <map> element for creating image maps. If you don’t want to use

the <map> tag, you can also use CSS to position links over an image and hide the contents

of those links, making it appear as though regions of an image are clickable. I discuss

both techniques in this lesson.

Getting an Image

To create an imagemap, you need an image (of course). This image will be the most use-

ful if it has several discrete visual areas that can be selected individually. For example,

use an image that contains several symbolic elements or that can be easily broken down

into polygons. Photographs generally don’t make good imagemaps because their various

elements tend to blend together or are of unusual shapes. Figures 9.19 and 9.20 show

examples of good and poor images for imagemaps.

FIGURE 9.18

Imagemaps: differ-

ent places, differ-

ent links.