 | HTML & XHTML: The Definitive Guide, 4th Edition |  |
One of the most popular tricks you'll find on almost everyone's web pages is the transparent image. Transparent images let the background show through, giving the remainder of the image the appearance of floating on the page. The effect is clever, and it is the only way to put nonrectangular images into your document displays. Section 5.2.1, "Understanding Image Formats"
Creating a transparent image is easy, once you understand how the process works and which images are candidates for transparency.
Images represent their colors in one of two ways: directly or through a colormap.
In the direct method, each pixel in the image contains the actual RGB values that define the color of that pixel. Such images are often called true color images, since the number of distinct colors in the image is generally quite large. It is often the case that very few pixels in a true color image share the same color, with many pixels having subtly different variations of the same color. The most popular image format using this representation method is the JPEG format.
Colormap-based images keep all the different colors used in the image in a table known as the colormap. Each pixel in the image contains an index into the table of that pixel's color. In general, the table is fairly small, usually less than 256 colors. This means that many pixels share the same color, and that whole groups of pixels can have their color changed by simply altering the appropriate entry in the colormap. The most common image format using colormaps is the GIF format.
Image transparency is only possible with images containing a colormap and is currently defined only for images using the GIF89a format. In this format, one entry in the colormap is tagged as the transparent color. All pixels containing the index of that entry will be made transparent when the image is displayed.
For example, consider an image containing eight colors. The colormap is eight entries long, with indices numbered zero through seven. Each pixel in the image contains a value from zero to seven, corresponding to its color in the colormap. If you indicate that the second entry in the color map, whose index is one, will be transparent, all pixels with the value one will be made transparent when the image is rendered.
The cookbook way to create a transparent image is easy: take a conventional image, determine the color to be made transparent, and convert the image to GIF89a format, marking that color as transparent.
The most difficult part for most people is finding a conventional image that is suitable for conversion. To make the background of an image transparent, the entire background must be one color. Unfortunately, many images do not meet this simple criteria. Scanned images, for example, usually have backgrounds that are a mix of several slightly different shades of one color. Since only one color can be made transparent, the result is a mottled background, part transparent and part opaque.
Many image-editing tools use a process known as dithering to create certain colors in an image. Dithered colors are not pure, but are a mix of several other colors. This mixture is not amenable to transparency. You'll often find dithering used on systems with small colormaps, like conventional 16-color VGA displays on some PCs.
Finally, some images have a pure background color, but that color is also used in parts of the image you want to keep opaque. Since every pixel having the appropriate colormap index is made transparent, these portions of the image become transparent as well.
In all cases, the problem can be solved by loading the image into an image editor, turning off dithering, and painting the background areas, usually by hand, to be a single color not used anywhere else in the image. Make sure you save the result as a GIF image, so that the colormap and pixel indexes will be retained.
Once you have an acceptable image, and you've determined the color you wish to make transparent, you'll need to convert the image to GIF89a format.
For PC and Unix users, a public-domain utility called giftrans does the job nicely. To convert an image, use this command:
giftrans -t index original.gif > new.gif
Replace index with the numeric index of the color to be made transparent. Original.gif and new.gif are the original nontransparent image and the resulting transparent image.
Apple Macintosh users have the advantage, though: they can use a single tool named Transparency to accomplish the conversion. It was written by Aaron Giles at Cornell University, who generously makes it available at no charge over the Internet. Try searching for it on the Web.
Finally, several commercial products let you create transparent and interlaced GIF images, including Adobe PhotoShop and PaintShop Pro. Of course, these tools can do far more than simply convert transparent images. For a complete discussion of transparency and image conversion, including links to the actual tools, visit:
|  | |
| 17.4. Tricks with Tables |  | 17.6. Tricks with Windows and Frames |
Copyright © 2002 O'Reilly & Associates. All rights reserved.