HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Background Images and Colors

As discussed in Chapters 2 and 6, most browsers support background images via a BACKGROUND attribute to the HTML BODY, D, or TH elements. Background images can use any of the supported image formats. However, care must be taken when selecting a background, so that it does not impair the readability of the actual content. In addition to a BACKGROUND, an author can specify the background color for the document using the BGCOLOR attribute. In both cases, here are some important design points:

Use low-contrast backgrounds. You don’t necessarily want the background to overshadow or obscure the text or images.

Use small colormaps. You don’t want to use up all the colors in the background and have none left for the actual images. This is particularly important for 256-color displays. Also, you should use the Windows colormap if at all possible—dithering looks particularly bad when applied to the background.

Contrast strongly with text colors. You don’t want the background color to be similar to any of the regular text colors. As described in Chapter 6, you can use the body element TEXT (regular text), LINK (nonvisited link), VLINK (previously visited link), and ALINK (link selected by user) attributes to reset the text colors, so that text is clearly visible.

Make sure the color choices look good on different machines/browsers. Again, you want to ensure that your choices work on poorer-quality computer displays—not everyone has a 16-million color graphics card and a $2,000 monitor!

If using BACKGROUND, also use BGCOLOR. This is particularly important when the text color contrasts poorly with the default background gray. In this case, the text will be unreadable until the background image arrives. An appropriate BGCOLOR will make the text readable, and also makes for a smoother transition once the background is loaded.

BGCOLOR values can be either RGB hexadecimal codes (e.g., #FF0000 for the color “red”) or a color name chosen from a defined list of names. Go to Appendix F on the companion Web site for a list of all the defined color names and their RGB hex code equivalents.

The references at the end of this chapter list sites on the Web that archive useful background images. Additional information about backgrounds is found at:

www.sci.kun.nl/thalia/guide/color/faq.html

This site also provides links to databases containing color and background examples.

Active Images and Imagemaps

Active images, clickable images, imagemaps—whatever they are called—you have certainly seen them, and most authors want to use them. An active image means that users can click their mouse pointer on top of the image and have different things happen, depending on where they clicked. For example, the active image could be a city map, such that clicking on different locations returns information about particular buildings, transportation routes, or historic monuments.

There are two ways of implementing active images. The original way, known as imagemapping, stores information about the active image on an HTTP server. When the user clicks on the image, the Web browser measures the location of the click, and sends this information to an HTTP server. The server uses these coordinates to determine which information to return to the browser.

This requires special processing by both the client and the HTTP server. First, the client must be able to measure the coordinates of the mouse pointer when the user clicks on the active image, and must be configured to send this information to an HTTP server for interpretation and action. Second, there must be resource on the server—often a gateway program—capable of interpreting this coordinate data. Finally, there must be a database on the server relating, for each image, the click coordinates to the appropriate URL. This means that the imagemap designer must take the image, mark out the desired regions, link these regions to particular URLs, and store this information in an imagemap database.

The second approach, called client-side imagemapping, includes the imagemap database within the HTML document. This eliminates the need to contact a server and offers many substantial advantages. However, not all browsers support this approach. Fortunately, you can use both methods for the same imagemapped image: If the browser understands client-side imagemapping, it will use the map within the document, and if it does not, it will access the HTTP server instead.

---

NOTE: Allowed Formats for Active Images

It is best to use the GIF format for active images, as some older browsers cannot handle active JPEGs. Also, do not use HEIGHT and WIDTH attributes to change the size or shape of the image—these values, when present, must be equal to the actual image size.

---

Things to Think About Before Starting

Before you get carried away with active images, stop and think about your audience. First recall that some users will not be able to view your active images, because they are using a text-only browser, such as lynx, or because they have disabled image loading because of a slow network connection (quite common). Consequently, you should make the image files as small as possible, and you might also wish to provide a text-only alternative for accessing the same information. For example, your document can have a line of text explaining what the image does and offering a hypertext link to a page providing a text-only approach. In particular, every active image element must have an ALT text string to explain the image’s purpose and to explain what to do if the image is not visible.

Server-based Imagemap Active Images

You must do two things to mark up a server-side imagemapped image. First, add the ISMAP attribute to the IMG element, which this tells the browser that this is an active image. Second, surround the IMG element with a hypertext anchor that points to the program on the server that will process the selected coordinate data. Thus, the minimal HTML markup (the extra markup for the active image is shown in boldface) is:

<A HREF=“<http://some.site.edu/cgi-bin/imagemap/my_database>”><IMG
SRC=“image.gif”
   ALT=“[Imagemap: The author, and a Large, Hairy Llama - an ACTIVE image]”
ISMAP></A>

which tells the browser that this is an active image and that, when a user clicks inside the image, the coordinates of the click should be sent to the server and to the program imagemap at the given URL. The coordinate information is sent to this URL using the HTTP GET method. Thus, once the image is selected, the accessed URL will look like

<http://some.site.edu/cgi-bin/imagemap/my_databasex,y>