Image Rollovers
Coordinating image rollovers with an onLoad function in the <body> tag that calls a function in the <head> tag to preload images can sometimes be a hassle, expecially when your page is assembled from various include files. If you want an easier way to manage rollovers across mulitple include files try this.
Example 1
This example will preload images as well as handle rollover functionality
Usage
<img src="default.jpg" style="background:url(swap.jpg)" height="200" width="200" border="0" alt="" onmouseover="this.osrc=this.src;this.src=this.style.background.match(/\((.+)\)/)[1];" onmouseout="this.src=this.osrc" />
To use, just change out the src and background:url parameters with your own files and change the height and width accordingly. The script inside the onmouseover and onmouseout will handle all the functionality.
At the moment, this script will work in all 5th generation browsers and above except Safari 1.0. This browser doesn't support reading the style.background property of an image. Until this gets fixed, you may choose to fall back on a method that's a combination of the old method of preloading images with this new method.
<img src="default.jpg" width="200" height="200" border="0" alt="" onload="this.h=new Image();this.h.src='swap.jpg';" onmouseover="this.osrc=this.src;this.src=this.h.src" onmouseout="this.src=this.osrc" />
This will create a new Image() with a src of swap.jpg after default.jpg has loaded on the page. On mouseover and mouseout, the two images are interchanged accordingly.