Create a Cool Color-Changing Rollover Effect: A 10 Minute Solution

October 1998

Create a Cool Color-Changing Effect When a User Rolls a Mouse Cursor Over a Hyperlink: A 10 Minute Solution

By Charles Caison

Have you ever wondered how to create that cool color-changing effect that happens when you roll your mouse cursor over a hyperlink on some Web pages?

You can easily accomplish this effect with a DHTML-enabled browser such as Internet Explorer 4. You can think of DHTML roughly as a marriage between style sheets and client-side scripting. The style sheet information controls the look of Web page elements while the client-side scripting manipulates elements at run time. The scripting can be done in any supported scripting language and provides control-of-logic-flow and style manipulation functionality. Using scripting, we can change almost any aspect of almost any object at run time. VBScript, JScript and JavaScript are the most commonly used languages.

We must use scripting to change the "color" style property of the hyperlink when the mouse cursor is over the hyperlink and again when the mouse cursor is not over the hyperlink. DHTML is very flexible and you can accomplish this effect in many ways. I will show you how to use the srcElement property to detect which page element generated the error and which hyperlink to change. In addition, I will show you how to do this in both VBScript and JavaScript.

The secret to making the hyperlink change color is responding to built-in event notifications. Event notifications are continuously sent from Windows to user applications, such as a Web browser. Events range from mousemove events to timer events and much more. We are concerned with the "onmouseover" and "onmouseout" events. The "onmouseover" event notification will automatically be sent from Windows when the mouse cursor hovers over the hyperlink. The "onmouseout" event notification will be sent when the mouse cursor is removed from hovering over the hyperlink. Our code will change the color of the hyperlink to red when the "onmouseover" event notification is sent and will change the color of the hyperlink to blue when the "onmouseout" event notification is sent.

Linking code to an event notification is very easy. One way to do it is to include code on the hyperlink definition. The code names the event and also names a procedure that should execute when that event occurs. For example:

onmouseover="ToColor(MouseOverColor)"

In the above example we have set up a procedure named ToColor() to execute when the "onmouseover" event occurs. This procedure is included directly in the hyperlink definition. See the sample page listing below. The code in the procedure is just as easy. Again, there are many ways to do this, but I have chosen to use the srcElement property so the code works properly regardless of which page element caused the event.

 window.event.srcElement.style.color = NewColor

Note the use of the color property of "style." There are many similar "style" properties that we can change in this way. See the sample code below. The color property can accept a hexadecimal format color. I have decided to use a global VBScript constant and a global JavaScript variable to hold the colors. This enables us to change all colors for all page elements in a single place, rather than on each page element.

This is just one way to accomplish this task. After you have experimented with DHTML for a while, you will develop your own style and will write DHTML code in a manner that most appropriately suits you. For now, just copy the code below, run it in your own browser, and have fun!

<HTML>
<HEAD>
<TITLE>Active Web Page</TITLE>

<SCRIPT language="JavaScript">

var MouseOverCol = "#ff0000";
var MouseNotOverCol = "#0000ff";

function ToColorJS(NewColor)
{
 window.event.srcElement.style.color = NewColor;
}
</SCRIPT>

<SCRIPT language="vbScript">

Const MouseOverColor = "#ff0000"
Const MouseNotOverColor = "#0000ff"

function ToColor(NewColor)
 window.event.srcElement.style.color = NewColor
end function
</script>
</HEAD>

<Body bgcolor="#00ffff">
<a href="http://www.devx.com" onmouseover="ToColor(MouseOverColor)"
onmouseout="ToColor(MouseNotOverColor)" id="TheLinkVBS"
language="vbScript">Developer's Exchange (VBScript)</a>
<p>
<a href="http://www.devx.com" onmouseover="ToColorJS(MouseOverCol)"
onmouseout="ToColorJS(MouseNotOverCol)" id="TheLinkJS"
language="JavaScript">Developer's Exchange (JavaScript)</a>

</BODY>
</HTML>

See this code in action