Inside Technique : Rollovers 101
By Scott Isaacs

A rollover effects occur when something on a page changes when the mouse moves over an element. Rollover effects were first created when Netscape added the onmouseover and onmouseout events to the HTML anchor element. With these events, you were able to do a few simple effects that would update the status bar or a form input control. Shortly following Netscape, Internet Explorer 3.0 added the same support, and rollover effects started to become the staple Javascript example.

Below demonstrates how rollover effects were first used. When you move the mouse over the link, notice the custom message being displayed in the status bar:: www.insideDHTML.com

<A HREF="http://www.insideDHTML.com" 
    ONMOUSEOVER="window.status='Go Home!'; return true" 
    ONMOUSEOUT="window.status=''; return true">
  www.insideDHTML.com
</A>

This represents the first generation rollover effect. The basis for first and following generation rollover effects are the onmouseover and onmouseout events. These events occur when the mouse enters and leaves the element. The evolution of the rollover effect is tied directly to these two events. Second generation rollover effects were introduced when Netscape Navigator 3.0 added scripting support to the image element.

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