[Jeff]

I use the following code which requires no preloading and works like a charm.
For future reference this is the javascript you need:

1) Put this in the head

<script language="JavaScript" type="text/javascript" src="PATH/FILENAME.js"></script>

2) Change the image paths below to your liking and then paste it in notepad and save as .JS
(Make sure you set the filename in the first code)

if (document.images) { 
image1on = new Image(); 
image1on.src = "images/page1-over.gif"; 
image1off = new Image(); 
image1off.src = "images/page1.gif";  

image2on = new Image(); 
image2on.src = "images/page2-over.gif"; 
image2off = new Image(); 
image2off.src = "images/page2.gif";

}  
function changeimages() { 
if (document.images) { 
for (var i=0; i<changeimages.arguments.length; i+=2) { 
document[changeimages.arguments[i]].src = eval(changeimages.arguments[i+1] + ".src"); 
} 
} 
}

3) Now put the following code infront of the image you want to change:

<a href="index.php" target="_parent" onmouseover="changeimages('image2', 'image2on')" onmouseout="changeimages('image2', 'image2off')">

Now insert the following code inside the image tag (the one that will be changing):

name="image1"

4) Repeat step 3 for each image, changing the numbers each time. Make sure each image is in the .js aswell.

There you go