Put this code in the <head> to preload images.
<script language=”text/javascript”>
<!– Begin
loadImage1 = new Image();
loadImage1.src = “north1.gif”;
staticImage1 = new Image();
staticImage1.src = “north.gif”;
loadImage2 = new Image();
loadImage2.src = “east1.gif”;
staticImage2 = new Image();
staticImage2.src = “east.gif”;
loadImage3 = new Image();
loadImage3.src = “south1.gif”;
staticImage3 = new Image();
staticImage3.src = “south.gif”;
loadImage4 = new Image();
loadImage4.src = “west1.gif”;
staticImage4 = new Image();
staticImage4.src = “west.gif”;
// End –>
</script>
Then use this code in the <body> to display the mouseovers.
<span onmouseover=”image1.src=loadImage1.src;” onmouseout=”image1.src=staticImage1.src;”>
<img name=”image1″ src=”north.gif” border=0></span>
<span onmouseover=”image2.src=loadImage2.src;” onmouseout=”image2.src=staticImage2.src;”>
<img name=”image2″ src=”east.gif” border=0></span>
<span onmouseover=”image3.src=loadImage3.src;” onmouseout=”image3.src=staticImage3.src;”>
<img name=”image3″ src=”south.gif” border=0></span>
<span onmouseover=”image4.src=loadImage4.src;” onmouseout=”image4.src=staticImage4.src;”>
<img name=”image4″ src=”west.gif” border=0></span>
0