Glowing Html Elements
Examples

Mouse over the text boxes below (they are <span> elements) and notice the background glows and dims when you mouse over them.

Mouse over Mouse over Mouse over Mouse over

Mouse over the italic section or the link below, the background will glow.

This is an example of highlighting an important word, or a link.

Mouse over on the <div> elements below and see the background-color changing:

Mouse over
Mouse over
Mouse over
Mouse over
Mouse over
Techniques

The technique builds from the previous section, where we show how to retrieve and change the background color of elements.

  1. Retrieve the color value so that we can manupulate it (to make the source color gradually glow to the target color. The color-retrieval technique is explained in this tutorial.
  2. Gradually change the background color. This can be accomplished using setTimeout() or setInterval() function function. I chose to use the former because I do not need to call clearInterval() to stop the loop.

To produce the glow, I created an object to wrap the elements to glow. This object will have a variable named elementRef that stores the element. This has 2 benefits (encapsulation and allows implicit parameter passing to the setTimeout() function). Part of the job of this object is to set the targetColor (the color we want the element to glow to) of the element.

function ColorGlowEffect(element)
{
  element.objReference=this;
  var thisRef=this;
  this.elementRef=element;

	
  this.setTargetColor=function(targetRed, targetGreen, targetBlue)
  {
    this.elementRef.targetRed=targetRed;
    this.elementRef.targetGreen=targetGreen;
    this.elementRef.targetBlue=targetBlue;	 
  }
}
Then we add a function named glow(), which to glow the color. You can see my comments inside the code. The setTimeout()is wrapped inside this object so that it can access the object properties (such as the target color, the source color, and the current color).
function ColorGlowEffect(element)
{
  element.objReference=this;
  var thisRef=this;
  this.elementRef=element;

	
  this.setTargetColor=function(targetRed, targetGreen, targetBlue)
  {
    this.elementRef.targetRed=targetRed;
    this.elementRef.targetGreen=targetGreen;
    this.elementRef.targetBlue=targetBlue;	 
  }


  function glow()
  {
    if (element && element.style==undefined)
      element.style={};
		
    var bgColor=getBgColor(element);
    if (bgColor==0)
      return;
		
    var colors=convertColor(bgColor);
		
    // Save the color into our object.
    if (element.srcRed==undefined)
      element.srcRed=parseInt(colors[0]);
    if (element.srcGreen==undefined)
      element.srcGreen=parseInt(colors[1]);
    if (element.srcBlue==undefined)
      element.srcBlue=parseInt(colors[2]);		
		
    if (element.red==undefined)
      element.red=element.srcRed;
    if (element.green==undefined)
      element.green=element.srcGreen;
    if (element.blue==undefined)
      element.blue=element.srcBlue;
		
    // This block of code below increases or deacrease the color value
// so that the color merges with the target color. var speed=3; if (element.targetRed<element.red) { element.red-=speed; // Prevent overshooting if (element.red<element.targetRed) element.red=element.targetRed; } else { element.red+=speed; // Prevent overshooting if (element.red>element.targetRed) element.red=element.targetRed; } if (element.targetGreen<element.green) { element.green-=speed; if (element.green<element.targetGreen) element.green=element.targetGreen; } else { element.green+=speed; if (element.green>element.targetGreen) element.green=element.targetGreen; } if (element.targetBlue<element.blue) { element.blue-=speed; if (element.blue<element.targetBlue) element.blue=element.targetBlue; } else { element.blue+=speed; if (element.blue>element.targetBlue) element.blue=element.targetBlue; } // Check how close we're to the target color var delta=Math.abs(element.targetRed-element.red)+ Math.abs(element.targetGreen-element.green)+ Math.abs(element.targetBlue-element.blue); // If we're close enough to the target color, // then stop. if (delta<speed*3) { element.red=element.targetRed; element.green=element.targetGreen; element.blue=element.targetBlue; } else { setTimeout(glow, 20); } // Assign the background color as #rrggbb string. // First, convert the value to a hex number (base 16) var redString=element.red.toString(16); var greenString=element.green.toString(16); var blueString=element.blue.toString(16); // Then prepend "0" if there is only one digit. if (redString.length<2) redString="0"+redString; if (greenString.length<2) greenString="0"+greenString; if (blueString.length<2) blueString="0"+blueString; // alert('#'+redString+greenString+blueString); // Now assign the color element.style["backgroundColor"]='#'+redString+greenString+blueString; };
}
We also need to add a function to be called by the event handler.
function ColorGlowEffect(element)
{
  element.objReference=this;
  var thisRef=this;
  this.elementRef=element;

	
  this.setTargetColor=function(targetRed, targetGreen, targetBlue)
  {
    this.elementRef.targetRed=targetRed;
    this.elementRef.targetGreen=targetGreen;
    this.elementRef.targetBlue=targetBlue;	 
  }


  function glow()
  {
    if (element && element.style==undefined)
      element.style={};
		
    var bgColor=getBgColor(element);
    if (bgColor==0)
      return;
		
    var colors=convertColor(bgColor);
		
    // Save the color into our object.
    if (element.srcRed==undefined)
      element.srcRed=parseInt(colors[0]);
    if (element.srcGreen==undefined)
      element.srcGreen=parseInt(colors[1]);
    if (element.srcBlue==undefined)
      element.srcBlue=parseInt(colors[2]);		
		
    if (element.red==undefined)
      element.red=element.srcRed;
    if (element.green==undefined)
      element.green=element.srcGreen;
    if (element.blue==undefined)
      element.blue=element.srcBlue;
		
    // This block of code below increases or deacrease the color value
// so that the color merges with the target color. var speed=3; if (element.targetRed<element.red) { element.red-=speed; // Prevent overshooting if (element.red<element.targetRed) element.red=element.targetRed; } else { element.red+=speed; // Prevent overshooting if (element.red>element.targetRed) element.red=element.targetRed; } if (element.targetGreen<element.green) { element.green-=speed; if (element.green<element.targetGreen) element.green=element.targetGreen; } else { element.green+=speed; if (element.green>element.targetGreen) element.green=element.targetGreen; } if (element.targetBlue<element.blue) { element.blue-=speed; if (element.blue<element.targetBlue) element.blue=element.targetBlue; } else { element.blue+=speed; if (element.blue>element.targetBlue) element.blue=element.targetBlue; } // Check how close we're to the target color var delta=Math.abs(element.targetRed-element.red)+ Math.abs(element.targetGreen-element.green)+ Math.abs(element.targetBlue-element.blue); // If we're close enough to the target color, // then stop. if (delta<speed*3) { element.red=element.targetRed; element.green=element.targetGreen; element.blue=element.targetBlue; } else { setTimeout(glow, 20); } // Assign the background color as #rrggbb string. // First, convert the value to a hex number (base 16) var redString=element.red.toString(16); var greenString=element.green.toString(16); var blueString=element.blue.toString(16); // Then prepend "0" if there is only one digit. if (redString.length<2) redString="0"+redString; if (greenString.length<2) greenString="0"+greenString; if (blueString.length<2) blueString="0"+blueString; // alert('#'+redString+greenString+blueString); // Now assign the color element.style["backgroundColor"]='#'+redString+greenString+blueString; }; this.doGlowUponTimeout=function() { glow(); };

The function below is used as onmouseover event handler. The code creates an ColorGlowEffect object if none is attached to the element (this is why we store it as a member of the element, so we don't keep creating it if the element already has one assigned to itself).

It then sets the target background color using setTargetColor() and initiates the glow process (which sets off the timerout by calling doGlowUponTimeout().

function handleMouseOver(myEvent, targetRed, targetGreen, targetBlue)
{
  if (!myEvent)
    myEvent=window.event;
  if (!myEvent)
    return;


  var firingElement=null;
  // Internet Explorer
  if (myEvent.srcElement)
  {
	   firingElement=myEvent.srcElement;  
  }
  // Netscape and Firefox
  else if (myEvent.target)
  {
    firingElement=myEvent.target;    
  }
  obj=null;
  if (firingElement.objReference)
    obj=firingElement.objReference;
  if (!obj)
    obj=new ColorGlowEffect(firingElement);
	
  obj.setTargetColor(targetRed, targetGreen, targetBlue);		
  obj.doGlowUponTimeout();	 	 	
}
The function below is used as onmouseout event handler. It calls setTargetColor() to make the element glow back to the original background color. Remembet that the original background color was saved during the creation of ColorGlowEffect object during onmouseover.

function handleMouseOut(myEvent)
{
  if (!myEvent)
    myEvent=window.event;
  if (!myEvent)
	return;
  var firingElement=null;
  // Internet Explorer
  if (myEvent.srcElement)
  {
	 firingElement=myEvent.srcElement;  
  }
  // Netscape and Firefox
  else if (myEvent.target)
  {
	 firingElement=myEvent.target;    
  }

  firingElement.objReference.setTargetColor(
    firingElement.srcRed, firingElement.srcGreen, firingElement.srcBlue);	 	 
  firingElement.objReference.doGlowUponTimeout();	 
}

To use it, assign onmouseover and onmouseout event handlers to elements like. In this example, 255,0,0 (red) is the target color:

<p style="background-color:#FFFFFF;" 
  onmouseover="javascript:handleMouseOver(event, 255,0,0);" 
  onmouseout="javascript:handleMouseOut(event);">

Mouse over to the paragraph below to see the result.

<p> with hover.

The paragraph below uses 255,255,0 (yellow) as the target color.

There's one deficiency to this method in that the element must have its background-color property defined in the style-sheet, otherwise it cannot retrieve the background-color. There are ways to overcome this by traversing the parent DOM tree to retrieve the background-color of the element's parent, but that is beyond the scope of this tutorial.

You can see another example of the technique on this page.

The source code is here: glowLibrary.js