Rollover Images in JavaScript

/*
  Script: RolloverImages.js
  Date Created: August 24, 2009
 
  Instruction:
  1. Include the RolloverImages.js script in the page header:
     <script type="text/javascript" src="RolloverImages.js"></script>
  2. Call the PreloadRolloverImages() function from the onload event of the Body tag:
     <body onload="PreloadRolloverImages();">  
  3. Add enableRolloverImages, rolloverImageSrcOff, and rolloverImageSrcOn tags to an image you want to rollover:
     <img id="imgRollover" src="ImgOff.jpg" border="0" enableRolloverImages="True" 
          rolloverImageSrcOff="ImgOff.jpg" rolloverImageSrcOn="ImgOn.jpg" />  
  4. Enable or disable the rollover effect by setting the enableRolloverImages attribute to 'true' or 'false'.
*/
 
// A global array to keep the preloaded images. It is not used anywhere.
var preloadedRolloverImages = new Array();
 
function PreloadRolloverImages()
{
    var j=0;
    for(var i=0; i<document.images.length; i++)
    {
        var img = document.images[i];
 
        // Two-step conditional statement is required for Firefox and Chrome.
        if (typeof(img.getAttribute("enableRolloverImages")) != "undefined" && 
            img.getAttribute("enableRolloverImages") != null)
        {
            if (img.getAttribute("enableRolloverImages").toLowerCase() == 'true')
            {
                // preload the 'On' image
                var preImage = new Image();
                preImage.src = img.getAttribute("rolloverImageSrcOn");
                preloadedRolloverImages[j] = preImage;
                j++;
 
                // assign event handlers
                img.onmouseover = function() { this.src = this.getAttribute("rolloverImageSrcOn") }; 
                img.onmouseout = function() { this.src = this.getAttribute("rolloverImageSrcOff") }; 
            }
        }
    }
}
Wisenheimer Brainstorm Wiki

User Tools

Site Tools

Rollover Images in JavaScript

Page Tools
