Inside Technique : The Rollover Helper Function
By Scott Isaacs

Even though rollover effects have been beaten to death by most sites (included this one) we decided they were worth one more visit. We created a function that makes it very quick and easy to add rollover effects to the links on your page. These are not DHTML enhanced rollovers, but rather a new approach to defining basic rollover effects that work in Navigator 3.0 or later or Internet Explorer 3.0 (except image rollovers which require 4.0) or later.

Our simple rollover function makes it easy to add three types of rollover effects to any link on your page:

Update the window status message
Example: Home Page | Search

Update text in an text input or textarea field
Example Home Page | Search

Change an image
Example SE Knows | SE Boogie

All three of the above effects are created using a single function, InitOverEffect(). This function takes 3 arguments, the first being the source of the rollover. This is usually a link on your page. The second argument is the destination element. This is the element that is being changed as the mouse moves over the source. The destination can be the window to change the status bar text, a text input box or textarea element, or an image. The last argument is the value to display at the destination. When the window is specified, the value is displayed in the status bar, when a text box is specified, the value is displayed in the text box, and when an image is specified the value specifies the source of the new image.

Next we show you how the above three examples were created.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.