This rollover uses the four mouse events to show 4 images in addition to the image that loads originally in the image tag.
- onmouseover (rollover)
- onmousedown (press of mouse)
- onclick (release of mouse)
- onmouseout (roll-off)

0



Example of what the code around the image looks like

(P.S. Don't copy this code on the page. Instead, copy it from the source in the body when you have the page open in your HTML editor.)
<body onload="preloadImages();">


<a href="#"
	onmouseover="changeImage('numberimg', 'images/1.gif'); return true;"
	onmousedown="changeImage('numberimg', 'images/2.gif'); return true;"
	onclick="changeImage('numberimg', 'images/3.gif'); return true;"
	onmouseout="changeImage('numberimg', 'images/4.gif'); return true;"><img id="numberimg" src="images/0.gif" width="100" height="100" alt="0" class="valigntext"></a>

Example of what the code in the head looks like

(P.S. Don't copy this code on the page. Instead, copy it from the source in the head when you have the page open in your HTML editor.)

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImage(image, newimage) {
 	var Image2Change = document.getElementById(image);
 	var newSrc = newimage;
	Image2Change.src = newSrc;
}

var preloadFlag = false;

function preloadImages() {
	if (document.images) {
		img1 = newImage("images/1.gif");
		img2 = newImage("images/2.gif");
		img3 = newImage("images/3.gif");
		img4 = newImage("images/4.gif");
		img5 = newImage("images/5.gif");
		preloadFlag = true;
	}
}






Images used for the above rollover:
- all white image loads with image tag.
- loads on onmouseover event.
- loads on onmousedown event.
- loads on onclick event (which is a kind of mouseup, if you will).
- loads on onmouseout event.