To facilitate smooth image rollovers in JavaScript, it's recommended that the images are preloaded so that the extra trip to the server is saved when the visitor moves the mouse over the image and the image changes immediately. Preloading is the process by which all images that are to be used for roll-overs are loaded along with the document.
Here is the code:
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
var image1 = new Image();
image1.src = "moveup.gif";
var image2 = new Image();
image2.src = "movedown.gif";
var image3 = new Image();
image3.src = "an1.gif";
var image4 = new Image();
image4.src = "an2.gif";
//-->
</SCRIPT>
Note: The preloader code should be placed in the HTML head, preferably before any other JavaScript code.
The code above assumes that the images are located in the same directory as the HTML file. If the images are placed in another directory, use relative URLs for the images in the preloader script as well for passing arguments to the rollover function.