Learn Advanced JavaScript Programming

Table of Contents

// fade from start to end descriptors (increase step to increase
  transition speed)
function fade(sred, sgreen, sblue, ered, egreen, eblue, step) {
 // loop to create fade effect
 for(var i = 0; i <= step; ++i) {
  // set current red descriptor
  var red = Math.floor(sred * ((step – i) / step) + ered *
  (i / step))

  // set current green descriptor
  var green = Math.floor(sgreen * ((step – i) / step) + egreen *
  (i / step))

  // set current green descriptor
  var blue = Math.floor(sblue * ((step – i) / step) + eblue *
 (i / step))

  // set background color according to descriptors
  setbgColor(red, green, blue)
 }
}

This function is responsible for the fade effect. It accepts seven arguments: The first three represent the RGB descriptors of the initial background color, the next three represent the RGB values of the target one, and the last argument determines the speed of the fade. The function consists of a single loop which iterates from 0 to step in increments of one. The RGB descriptors of the current background are computed and assigned to local variables on each iteration of the loop. A computed red, green, or blue color is a weighted average between the initial color value and the target one. During the first iteration, step – i is equal to step, so the initial color descriptor is actually multiplied by 1 in the expression Math.floor(scol * ((step – i) / step). Since i is 0, the descriptor of the target color is multiplied by 0 in the expression ecol * (i / step) where col is red, green, or blue. Therefore, the background color is set to the initial color during the first pass, and to the target color during the last pass. The last statement in the loop actually sets the background color by passing the computed descriptors to setbgColor().

Event Handlers

It is common to use the fading effect with the onLoad and onUnload event handlers. If you prefer to use it with both, it is recommended that you generate the reversed transition for each.

fgColor

The document.fgColor property represents the color of the document text (foreground color). It reflects the <BODY> tag’s TEXT attribute. The property is expressed as a hexadecimal RGB triplet or as one of the supported color names. When you assign it a triplet, the crosshatch mark (#) is optional.

Setting a value to the fgColor property is equivalent to setting a value to the <BODY> tag’s TEXT attribute, enclosing the entire text with the <FONT COLOR="setColor"></FONT> tag pair, or using the String object’s fontcolor method.

alinkColor

The document.alinkColor property is JavaScript’s reflection of the <BODY> tag’s ALINK attribute. It is a string specifying the color of an active link (after the mouse button is pressed down over a link but before it goes back up). The string must represent the hexadecimal RGB triplet of a color or one of the supported color names.

Aside from a few exceptions, you cannot set the value of this property after the page has finished loading, because there is no way to modify a page’s content after it has been laid out.

linkColor

The document.linkColor property is JavaScript’s reflection of the <BODY> tag’s LINK attribute. It specifies the color of the document’s hypertext links which the user has not visited yet. The color must be represented in the form of a hexadecimal RGB triplet or one of the supported color names. As explained above, you cannot set this property after the HTML source has gone through the layout stage. You can still read the property’s value at any time via an immediate script or a deferred one.

vlinkColor

The document.vlinkColor property is JavaScript’s reflection of the <BODY> tag’s VLINK attribute. The color must be represented in the form of a hexadecimal RGB triplet or one of the supported color names. This property represents the color of already-followed hypertext links. You can set it as long as the HTML source has not been through layout yet.

Table of Contents