Image Rollovers

Image Rollovers are a common visual effect used by websites to encourage user mouse interaction within a document. The most common method for creating image rollovers became outdated as of XHTML 1.0, though most websites have not yet modified their chosen script to conform to the web standard. This tutorial will show you how to create the same effect achieved by that old inline scripting, with the added perk of built-in image pre-loading.

To make sure this script runs AFTER the page finishes downloading, we have to add it to the list of "window.onload" events. It is important to preserve other functions that might be scheduled to execute "onload", so we set the old "window.onload" event to a variable for later use:

Code:
window.image_mouseover_effect_oldLoad = window.onload ? window.onload : function(){};

Now we design our own onload function, which will find all the images that have "image_mouseover_effect" in their class (called "className"), and then modify each image so it has the mouseover effect:

Code:
window.onload = function() {
  // our script will be here
};

First, store an array of all elements in the document:

Code:
var allImages = document.getElementsByTagName("img");

Then loop through each img element in that array, and pick out the ones that have our special class name "image_mouseover_effect":

Code:
for(var i=0; i<allImages.length; i++) {
  if(allImages[i].className.indexOf("image_mouseover_effect") > -1) {
    // Code from next step
  }
}

Each img needs a function for the onmouseover (mouse entering) event. The function will change the image's src attribute (the image's location) to something like "imageX_over.jpg", from an original "imageX.jpg":

Code:
allImages[i].oldonmouseover = allImages[i].onmouseover ? allImages[i].onmouseover : function(){};
allImages[i].onmouseover = function(e) {
  var li = this.src.lastIndexOf(".");
  this.src = this.src.substring(0,li) + "_over" + this.src.substring(li, this.src.length);
  this.oldonmouseover(e);
};

Like the onmouseover event, we need to handle the onmouseout (mouse leaving) event. This next part reverts the image's src attribute back to the original "imageX.jpg", but only if it has "_over" in it (note that 5 is the length of "_over"):

Code:
allImages[i].oldonmouseout = allImages[i].onmouseout ? allImages[i].onmouseout : function(){};
allImages[i].onmouseout = function(e) {
  this.src = this.src.replace(/_over\./mi,".");
  this.oldonmouseout(e);
};

Lastly, we need to call the "window.onload" function that we replaced, so our image rollover script doesn't disable other scripts on the same page:

Code:
window.image_mouseover_effect_oldLoad();

That's it! Now, lets see all of those pieces in one clean block of JavaScript code:

Code:
window.image_mouseover_effect_oldLoad = window.onload ? window.onload : function(){};
window.onload = function() {
  var allImages = document.getElementsByTagName("img");
  for(var i=0; i<allImages.length; i++) {
    if(allImages[i].className && allImages[i].className.indexOf("image_mouseover_effect") > -1) {
      allImages[i].oldonmouseover = allImages[i].onmouseover ? allImages[i].onmouseover : function(){};
      allImages[i].onmouseover = function(e) {
        var li = this.src.lastIndexOf(".");
        this.src = this.src.substring(0,li) + "_over" + this.src.substring(li, this.src.length);
        this.oldonmouseover(e);
      };
      allImages[i].oldonmouseout = allImages[i].onmouseout ? allImages[i].onmouseout : function(){};
      allImages[i].onmouseout = function(e) {
        this.src = this.src.replace(/_over\./mi,".");
        this.oldonmouseout(e);
      };
    }
  }
  window.image_mouseover_effect_oldLoad();
};

• View Demo