Image Roll Overs

Home
	Main Page

Links
	Classical
	Popular
	Programming
	Shareware
	Emulation

Opus
	Gtr & Fl.
	Concerto

Code
	Status bar
	Math
	Perl
	Base Address
	Meta Script
	DHTML
	WSC

Programs
	Markup
	Clipboard

Image Rollovers.

The user's browser needs to be Netscape Navigator version 3 or later, or Microsoft Internet Explorer version 4 or later.

To create a rollover effect, you must write an event handler to respond to an images MouseOver event. In this event handler you simply change the source property of the image to a different one:

To reset the image's source property use an event handler to handle the images MouseOut event:

Internet Explorer allows the changing of the images Width and Height properties, however Netscape Navigator does notl. Netscape Navigator is not case sensitive, so you can write OnMouseover with any combination of upper case and lower case letters: oNmoUseovER, for example. However, with Internet Explorer you should only use lower case letters, as in the above example, and it will work in either browser.

The most efficient way to do this is to pre-load your images. Here is a simple JavaScript example that will do just that:

function Preload(src)
{
	var imgNew = new Image();
	imgNew.src = src;
	return imgNew;
}

imgHoverOut = Preload('path/imgout.jpg');
imgHoverOver = Preload('path/imgover.jpg');

Below is an example that does things a little differently:

// Check if the client's browser supports rollovers.
if (((Navigator.appName == "Netscape") && (parseInt(Navigator.appVersion) >= 3))
	|| ((Navigator.appName == "Microsoft Internet Explorer") && (parseInt(Navigator.appVersion) >= 4)))
{
	var imgOver = new Array(4);	// Array of Images to be displayed when onMouseOver event occurs.
	var imgOut = new Array(4);	// Array of Images to be displayed when onMouseOut event occurs.

	// Loop through the Arrays and set the as Image Objects.
	for (var i =0; i <= 3; i++) {
		imgOver[i] =new Image();
		imgOut[i] = new Image();
	}

	// Then finally set each Images source property.
	imgOver[0].src = "./images/Image1.jpg";
	imgOver[1].src = "./images/Image2.jpg";
	imgOver[2].src = "./images/Image3.jpg";
	imgOver[3].src = "./images/Image4.jpg";

	imgOut[0].src = "./images/Original1.jpg";
	imgOut[1].src = "./images/Original2.jpg";
	imgOut[2].src = "./images/Original3.jpg";
	imgOut[3].src = "./images/Original4.jpg";
}

Then you can have your <IMG> tags MouseOver event call a function like so:

function HoverOver(s, n) {
	/* Where s is the name of the Image in the document
	 * and n is the Index for the imgArray created above.
	*/
	document.Images[s].src = imgOver[n].src;
}

The OnMouseOut event can call a function to switch back the source property like so:

function HoverOut(s, n) {
	/* Where s is the name of the Image in the document
	 * and n is the Index for the imgArray created above.
	*/
	document.Images[s].src = imgOut[n].src;
}