Yah, there are 4,000.6 different versions of this out there -- but I've always been partial to this one. I think I wrote it about 300 years ago when dinosaurs still roamed the web, and it's held me in good stead ever since. I use it a lot. It might be in the fossil record.

In the header [or your .js file], you'll need this function:

<script type="text/javascript" language="JavaScript">
<!--

function normRoll(imgname, imgsrc) {
	imgsrc = "images/" + imgsrc;
	document.images[imgname].src = imgsrc;
	return true;
}

//-->
</script>

Then, let's look at the href for the image you want to roll:

<a href="http://andrick.com"
onMouseover="normRoll('home','home_on.gif');"
onMouseout="normRoll('home','home.gif');">
<img src="img/home.gif" alt="roll over me" name="home" width="145" height="30" border="0">
</a>

No big huhu, right? First variable is the image name, second is what you'd like to change it to. That second line in the function points it where you need to go, since most of us tend to organize image directories -- into, say, one.

Here's a working example:

• Nope, no preloader. And I don't really care, frankly. Most of the world we design for is off the 22.8 modem standard folks; as long as you're using optimized GIFs or small JPGs [which is what this is meant for] the enduser won't notice.
• Want to make your life easy? Name the 'on' state for the image 'home.gif' as 'home_on.gif'. Seems silly to mention it, but there you go.
• You can, of course, use it to control other images on a page as well. Just point the imgname variable where you want it to go.