Web Design in a Nutshell, 2nd Edition

Multipart Images in Tables

There are a number of reasons why you may want to slice a large image into pieces and use a table to reconstruct it seamlessly on a web page:

Rollovers

If you want portions of the image—but not the whole image—to respond to the mouse passing over them (mouseover events or rollovers), it is more efficient to swap out just the bits that change instead of replacing the whole image. Rollover effects are created with JavaScript. See Chapter 28 for sample code.

Animations

Similarly, if you want to add animation to small areas within an image, it is better to break up the image and animate just the portions that move. This will result in smaller files to download.

Better Optimization

At times, you may find that an image contains distinct areas of flat color and distinct areas of soft or photographic images. Breaking the image into sections allows you to save some sections as GIF (the flat color areas) and others as JPEG (for graduated tones), to achieve better optimization and image quality overall. For more information on optimizing images, see Chapter 19 and Chapter 20.

Imagemaps

Break the image into separated linked images instead of using an imagemap. This allows alternative text (using the alt attribute) to be added for each linked section of the image (instead of a single alt message for the whole imagemap). This makes the page more accessible for people using non-graphical or speech-based browsers.

In Figure 13-26, I’ve divided an image into sections ...