InformIT: Sams Teach Yourself HTML 4 in 24 Hours > How and Why to Avoid Using Imagemaps

How and Why to Avoid Using Imagemaps

The first thing I must say about imagemaps is that you probably won't need—or want—to use them! It's almost always easier, more efficient, and more reliable to use several ordinary images, placed right next to one another, with a separate link for each image.

For example, imagine that you wanted to make a Web page that looks like the one in Figure 14.1, with each of the glowing words leading to a different link. The obvious approach is to use a single imagemap for the entire central graphic. You'll see how to do that later this hour.

Figure 14.1 You can create this page using ordinary <img /> tags and <a href> links. Imagemaps aren't necessary.

However, the better solution is to cut the graphic into pieces by using Paint Shop Pro (or any other graphics program) and make each piece a separate image on the Web page. This way, the page is compatible with all versions of all Web browsers without requiring any server scripting or advanced HTML. Figure 14.2 shows how to cut the picture so that each link area is a separate image. Figure 14.3 shows the HTML that creates the page in Figure 14.1, using the images in Figure 14.2.

Figure 14.2 To avoid using imagemaps, you need to cut the image on the left into the seven images on the right. (Cut and paste using the rectangular selection tool.)

Figure 14.3 Using the images in Figure 14.3 is one way to implement the page in Figure 14.1. (The big image in Figure 14.3, links0.gif, isn't used.)

Note

Notice that I was very careful not to put any spaces or line breaks in the bottom two <img /> tags in Figure 14.3. A space or line break between <img /> tags creates a small space between the images on the page, and the illusion of everything fitting together into one big image would be totally destroyed.

For the same reason, it's important not to put several images whose widths add up to more than about 580 pixels on a single line. The result might look good on your 800x600 screen, but someone looking at the page in a 640x480 window would see the images broken onto separate lines.

When would you want to use an imagemap, then? Only when the parts of an image you want to link are so numerous or oddly arranged that it would be a big hassle to chop the image into smaller images.

That does happen from time to time, so it's a good idea to know how to create imagemaps when you truly need to. The rest of this hour shows you how.

Mapping Regions Within an Image | Next Section

Previous Section