Simple Swap (image rollovers)
Our goal is to make simple things simpler… right?
Simple Swap is a way to use custom tag attributes and JavaScript triggers to simplify image rollovers, and make Image Rollovers the easiest thing in the world to use without messy JavaScript function calls and image preloading.
Peter-Paul Koch gets us heading down the path of using custom attributes of existing HTML elements to help abstract our Javascript and keep it from cluttering our HTML in his article JavaScript Triggers. This article uses that method to simplify image rollovers.
We have all dealt with JavaScript files pre-loading images for mouseover and mouseout events, and some ugly cryptic functions (not to mention HTML) to execute image rollovers. What we needed was just a easier simpler way to put that all together.
Let’s work to apply this concept abstraction, and see where it leaves us. Conceptually, Peter-Paul argues that we should add an attribute to the html tag which triggers Javascript actions. Our starting place is a simple image embeded in a page.
[html]
<img src="image.gif">
[/html]
The only additional piece of information we need for a rollover image, is where the image is. So we add that specific image source as a custom attribute named oversrc to the image. This attribute will be what triggers our javascript rollover later on.
[html]
<img src="image.gif" oversrc="image_over.gif">
[/html]
Before we get to triggering image rollovers based upon this attribute, we need to setup a function which will execute the onmouseover and onmouseout events. This function performs both the mouseover and mouseout events, and just changes which image url to set the src attribute to. It’s a simple function, but so are image rollovers.
[js]
function SimpleSwap(el,which){
el.src=el.getAttribute(which||"origsrc");
}
[/js]
This approach is simple, and is just one step ahead of where we are; it ties the rollover image source url with the tag, and simplifies our rollover functions.
Now, if we didn’t want to trigger our javascript automatically we could embed it like this:
[html]
<img src="image.gif" oversrc="image_over.gif" onmouseover="javascript:SimpleSwap(this,'oversrc');" onmouseout="javascript:SimpleSwap(this);">
[/html]
This works, however our goal is to have this rollover functionality triggered by the existance of the oversrc attribute on an image tag, so we need to automagically create the onmouseover and onmouseout function calls.
This function simply goes through all images on a page, and if the oversrc attribute is present, it adds the appropriate event handlers for the SimpleSwap rollover function. The only tricky part is setting the scope of the function call when adding it as an event handler so it gets the correct value for ‘this’ when passed as a parameter to the SimpleSwap function.
[js]
function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
var oversrc = x[i].getAttribute("oversrc");
if (!oversrc) continue;
// preload image
// comment the next two lines to disable image pre-loading
x[i].oversrc_img = new Image();
x[i].oversrc_img.src=oversrc;
// set event handlers
x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
x[i].onmouseout = new Function("SimpleSwap(this);");
// save original src
x[i].setAttribute("origsrc",x[i].src);
}
}
[/js]
Now one last piece of code to run the setup function when the document onload event is fired. We want to do this in such a way that we don’t need to add a function call to our <body> tag onload event handler. This method of attaching the SimpleSwapSetup function preserves any existing functions on that event handler.
[js]
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
[/js]
Example
The following code is all we end up with for a nice clean implementation of Image Rollovers:
[html]
<script language="javascript" src="/download/simpleswap.js"></script>
<p><img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif"></p>
[/html]
A final example is here: http://jehiah.com/sandbox/simpleswap.html
Download
Download the final javascript file : http://jehiah.com/download/simpleswap.js
Update
6⁄10 - version 1.1 - Major updates to simplify javascript code (not usage) even further provided by Adam Vandenberg. Combined SimpleSwapOn and SimpleSwapOff and simplified some of the inialization code.