Move the mouse over the links below

This will be highlighted

This will also be highlighted, but with different highlight color

The relevant code is below.  Note that #FFFF00 is the color of the highlight.  This produces the color yellow.

Links code:

<a onMouseOver="javascript:highlightLink(this, '#FFFF00');" 
  onMouseOut="javascript:unhighlightLink(this);"
  HREF="index.html">This will be highlighted</a>

<a onMouseOver="javascript:highlightLink(this, '#00FF00');" 
  onMouseOut="javascript:unhighlightLink(this);" 
  HREF="index.html">This will also be highlighted, but with different highlight color</a>

JavaScript code:

// This variable is for saving the original background colors
var previousBackground=0;
function unhighlightLink(link)
{
  // hack!!! code to support Netscape 6 and 7
  if (previousBackground==0)
  {
    if (link.style)
    {
      link.style.background=0;
    }
  }
  // end hack
  else
  {
    link.style["backgroundColor"]=previousBackground;
  }
  previousBackground=0;
}

function highlightLink(link, highlightColor)
{
  // If no style has been assigned, assign it, otherwise Netscape will 
  // behave weird.
  if (!link.style)
  {
    link.style={};
  }
  else
  {
    previousBackground=link.style["backgroundColor"];
  }
  // Assign the highlight color
  link.style["backgroundColor"]=highlightColor;
}


Back

(C). F. Permadi