(idea) by rabidcow Sat Jan 20 2001 at 22:58:21

The problem with this method is that you'll end up with a delay between the first time the mouse goes over the image and the time the mouseover image appears because the browser has to download the image at that point. One solution I used was to add lowsrc=XYZ.GIF in the img tag, but newer web browsers don't always load the lowsrc image. Consequently, the only good way to eliminate this delay is to add JavaScript for preloading images.

Here's some rollover/mouseover code I personally wrote a while ago: (I know you're all just dying to use code written by the grand and famous rabidcow) 

<body>

<script language="JavaScript1.2">
<!--
// number of images that change
var number_of_images = 4;
// number of images before the first image that changes
var start_image_index = 1;

var image_array = new Array(number_of_images);

// switch to the mouseover image
function image_over(index) {	
	document.images[index+start_image_index].src = image_array[index].over.src;
}
// switch to the mouseout image
function image_out(index)  {
	document.images[index+start_image_index].src = image_array[index].out.src;
}

// preload the mouseover/out images
function image_pair(index,normal,mouse_over) {
	this.over = new Image;
	this.over.src = mouse_over;
	this.out = new Image;
	this.out.src = normal;
}

// change the images here
image_array[0] = new image_pair(0,"image0o.jpg","image0i.jpg");
image_array[1] = new image_pair(1,"image1o.jpg","image1i.jpg");
image_array[2] = new image_pair(2,"image2o.jpg","image2i.jpg");
image_array[3] = new image_pair(3,"image3o.jpg","image3i.jpg");

// -->
</script>


<!-- also change the images here -->

<img src=blahblahblah.jpg width=120 height=12>

<a href=link0.html onmouseover=image_over(0) onmouseout=image_out(0)>
<img src=image0o.jpg width=120 height=24 border=0></a>

<a href=link1.html onmouseover=image_over(1) onmouseout=image_out(1)>
<img src=image1o.jpg width=120 height=24 border=0></a>

<a href=link2.html onmouseover=image_over(2) onmouseout=image_out(2)>
<img src=image2o.jpg width=120 height=24 border=0></a>

<a href=link3.html onmouseover=image_over(3) onmouseout=image_out(3)>
<img src=image3o.jpg width=120 height=24 border=0></a>

Now that I look at this, and at anklenut's version, for some browsers onMouseOver and onMouseOut have to be in a <a href> tag surrounding the image or they have no effect.

I like it!