Inside Technique : The Rollover Helper Function : The Script

The InitOverEffect is a special function that intializes the real mouseover and mouseout event handlers. By creating this special initialize function, we are able to simplify adding rollover effects by removing the need to define both an onmouseover and an onmouseout handler. When the InitOverEffect function is called, it stores the rollover effect arguments on the src element, then reassigns both the onmouseover and onmouseout events to the appropriate handlers, and then calls the new onmouseover event. This final call is necessary to ensure that the first rollover works properly.

Below is a commented version of the script:

// This code can be reused as long as the following notice is maintained

// Copyright 1999 InsideDHTML.com, LLC
// For more information, see www.siteexperts.com

function doOver() {
  // Destination is the window - update status
  if (this.dest==window) {
    window.status = this.overValue
    return true
  }
  // Destination is the input element - update value
  else if ((this.dest.type!=null) && ((this.dest.type=="text") 
    || (this.dest.type=="textarea")))
    this.dest.value = this.overValue
  // Destination is an image - update src
  else if (this.dest.src!=null) 
    this.dest.src = this.overValue
  return true
}

function doOut() {
  // Destination is the window, clear status
  if (this.dest==window)
    window.status=""
  // Destination is the input element, set default value
  else if (this.dest.type!=null)
    this.dest.value=this.dest.defaultValue
  // Destination is an image, reset original image
  else if (this.dest.src)
    this.dest.src = this.dest.osrc
}

function OverEffect(src,dest,overValue) {
  // Assign onmouseover handler
  src.onmouseover = doOver
  // Assign onmouseout handler
  src.onmouseout = doOut
  // Store the destination element on the src
  src.dest = dest
  // Store the overValue on the src
  src.overValue= overValue
  // If an image, start downloading
  if (dest.src!=null) {
    dest.osrc = dest.src
    var i = new Image()
    i.src = src.overValue
  }
}

function InitOverEffect(src,dest,overValue) {
  // Setup over effect
  OverEffect(src,dest,overValue)
  // Make sure first rollover is applied
  return src.onmouseover()
}


function doLoad() {
//Can also setup from script
//OverEffect(document.links[0],window,"Hello World")
}

//window.onload = doLoad

When examining the code, you will notice we broke the intialization of the rollover into two functions. We created the extra OverEffect function to make it easy to define rollover effects from within script blocks, not just on the element. In the above code, we included a commented out onload event handler. In the commented onload event handler, we demonstrate how to call the OverEffect() function. In this case, the first link would be assigned a rollover effect that updates the status bar.

The primary benefit for defining the rollover effect from script is for image rollovers. We added special code that causes the image to start downloading when we setup the rollover effect. This gives the images a chance to download before being needed. Otherwise, the image is not downloaded until the rollover effect occurs.

The beauty of this technique is that it encapsulates all the basic rollover types into a single easy to use function. By creating an initialization function we make defining rollovers very direct with little room for error. This function can also be easily extended for more advanced rollovers (eg., IE4+ DHTML rollovers that set the contents of an element on the page) simply by adding more conditions to the destination test.

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