Image Rollovers

Feb1109Feb 11, 09

Author's note: This technique is ancient and should not be used. Use CSS ":hover", and if you absolutely must img tags, swap between two so the browser can load them when necessary.


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(); };


About Jason Miller:

I am a JavaScript developer from Waterloo, Ontario, Canada. When I am not typing green code onto a black screen, you might find me at the nearest coffee pub checking out the brew. I run a internet firm called developIT and maintain blogs and web apps when I can.
Comments
Kelly#
Wow, much better than the old way. Now I don't have to customize my rollover script every time I make new images. And there's no need for those custom ids, onmouseover, and onmouseout events. It's completely re-usable. Thank you so much for posting this!
jasonadmin#
I'm glad you found it useful!
Leave a Comment

Post Comment