Learn Advanced JavaScript Programming

Colors

JavaScript supports several Web page color properties, such as background colors and activated link colors. They are all constructed by the same method. There are generally two ways to construct color specifications:

Netscape color names
hexadecimal triplets

The tendency among Web page designers is to use Netscape color name specification, which is more intuitive and easier to maintain. For example, you can set the document’s background color in the following fashion:

<BODY BGCOLOR="white">

Before Netscape implemented such color names, and Microsoft followed suit, the only way to specify a color was via hexadecimal triplets. These are still supported, so you can set the background color to white, for instance, in the following way:

<BODY BGCOLOR="#ffffff">

As you can see, the triplet is constructed of three two-digit hexadecimal numbers. They represent the red, green, and blue elements of the color descriptor. In total, there are approximately 17 million combinations, which is equal to the number of colors supported by a typical Macintosh or SVGA color display. However, Netscape uses a much more limited color cube. The cube consists of all the combinations of 00, 33, 66, 99, CC, and FF for each of the color descriptors. The result is 216 (6 * 6 * 6) distinct colors. The cube occasionally varies. On Macs, it includes the full 256-color palette. On X-Windows systems, if more than 40 (256-216) colors are already in use, the cube is minimized to only 125 (5 * 5 * 5) colors. For now, we shall base our discussion on the standard 216-color cube. Many more colors that are the result of dithering, or mixing, are beyond the standard cube.

An HTML document may consist of several color specifications. The following script segment demonstrates them:

<BODY
 [BGCOLOR="#backgroundColor"]
 [TEXT="#foregroundColor"]
 [LINK="#unfollowedLinkColor"]
 [ALINK="#activatedLinkColor"]
 [VLINK="#followedLinkColor"]>
</BODY>

All color attributes are scripted via JavaScript as properties of the document object.

bgColor

The document.bgColor property is expressed as a hexadecimal RGB triplet or as one of the string literals listed at the end of the book. This property is the JavaScript reflection of the BGCOLOR attribute of the <BODY> tag. You can change the background color at any time, even via a deferred script. If you express the color as a hexadecimal RGB triplet, you must use the format rrggbb (case insensitive).

The bgColor property is a commonly scripted property. You can set it to create fade effects, color cubes, and so forth, as will be demonstrated in this chapter. The following script creates a Netscape color cube and sets the background color to the one the user selected from the cube. Here is the script:

<HTML>
<HEAD>
<TITLE>Netscape color cube</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

// create 6-element array
var hex = new Array(6)

// assign non-dithered descriptors
hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"

// accept triplet string and display as background color
function display(triplet) {
 // set color as background color
 document.bgColor = '#' + triplet

 // display the color hexadecimal triplet
 alert('Background color is now ' + triplet)
}

// draw a single table cell based on all descriptors
function drawCell(red, green, blue) {
 // open cell with specified hexadecimal triplet background color
 document.write('<TD BGCOLOR="#' + red + green + blue + '">')

 // open a hypertext link with javascript: scheme to call
display function
 document.write('<A HREF="javascript:display(\'' + (red +
green  + blue) + '\')">')

 // print transparent image (use any height and width)
 document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12  WIDTH=12>')

 // close link tag
 document.write('</A>')

 // close table cell
 document.write('</TD>')
}

// draw table row based on red and blue descriptors
function drawRow(red, blue) {
 // open table row
 document.write('<TR>')

 // loop through all non-dithered color descripters as green hex
 for (var i = 0; i < 6; ++i) {
  drawCell(red, hex[i], blue)
 }

 // close current table row
 document.write('</TR>')
}

// draw table for one of six color cube panels
function drawTable(blue) {
 // open table (one of six cube panels)
 document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')

 // loop through all non-dithered color descripters as red hex
 for (var i = 0; i < 6; ++i) {
  drawRow(hex[i], blue)
 }

 // close current table
 document.write('</TABLE>')
 }

// draw all cube panels inside table cells
function drawCube() {
 // open table
 document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>')

 // loop through all non-dithered color descripters as blue hex
 for (var i = 0; i < 6; ++i) {
  // open table cell with white background color
  document.write('<TD BGCOLOR="#FFFFFF">')

  // call function to create cube panel with hex[i] blue hex
  drawTable(hex[i])

  // close current table cell
  document.write('</TD>')
 }

 // close table row and table
 document.write('</TR></TABLE>')
}

// call function to begin execution
drawCube()

// -->
</SCRIPT>
</BODY>
</HTML>

Example 21-1 (ex21-1.htm). A Netscape color cube.

Table of Contents