HTML The Definitive Guide (144 page)

15.4.4 Embedded Guides

We generally argue for subtlety when you include hyperlinks in your documents, embedding them within the content and within context. But there are times when prominent guides to additional content are appropriate, like street signs in a crowded neighborhood.

Traditionally, HTML authors have placed their street signs (arrow icons with text labels) between major sections or at the beginning and end of the document to guide users back to a home page or on to the next page in the document series. Using

And tables help you align the signpost elements for a more pleasing and concise presentation.

The following HTML segment, for example, uses a two-column table to set a hyperlink guide apart from the document content. The technique also nicely aligns the guide's graphical and textual elements, thereby giving the reader a clear and
distinct option to jump to another section of the document, as shown in Figure 15.7:

The role of the kumquats in earthly and cosmic affairs has been well documented.

Nearly from the moment that humankind began recording history -- even as oral tradition -- historians have reported the extraordinary and omnipresent influences of kumquats.

Kumquat influence in the Arts

For instance, early in the history of man, the kumquat played a vital role in the formation of religious beliefs. Central to annual harvest celebrations was the day upon which kumquats ripened. Likened to the sun (sol), the golden fruit was taken (stisus) from the trees on the day the sun stood highest in the sky. We carry this day forward even today, as our summer solstice.

Figure 15.7: Tables let you embed signposts in your content flow

15.3 Custom Bullets

15.5 Transparent Images

Chapter 15

Tips, Tricks, and Hacks

15.5 Transparent Images

One of the most popular tricks you'll find on everyone's HTML pages is the transparent image. They let the background show through, giving the remainder of the image the appearance of floating on the page. The effect is clever and is the only way to put nonrectangular images in your HTML document
displays. [Understanding Image Formats, 5.2.1]

Creating a transparent image is easy, once you understand how the process works and which images are candidates for transparency.

15.5.1 Colors, Maps, and Indexes

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.

15.5.2 Creating a Potentially Transparent Image
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.