Image Rollovers

Jack

Image rollovers are a popular way of making a website appear more dynamic. Image rollovers are often used for highlighting buttons when users hover over them with using their mouse. Of course, there are plenty of other uses for image rollovers too, because the basic principal of image rollovers is that you simply swap one image with another image.

Basic image rollovers

You code image rollovers by using the onMouseover event handler to swap the first image with the second image. The onMouseout event handler swaps it back to the original image.


<a href="http://www.quackit.com/javascript/image_rollovers.cfm"
onMouseOver="/pix/smile.gif"
onMouseOut="/pix/nosmile.gif">
<img src="/pix/nosmile.gif"
	width="100"
	height="100"
	border="0"
	name="jack">
</a>

There's only one problem with the above method for performing image rollovers, and that is, the browser doesn't load the second image until the user hovers over the first image. This image could take a second or two to load - which reduces the impact of the rollover. You really want the image to swap immediately - not after a few seconds.

Better image rollovers

To prevent any delay in your second image appearing, you need to preload your images. This is not as tricky as it sounds - you simply load all your images into the browsers cache at the time the page loads.

To preload your images

Place this code between the <head></head> tags of your document (as you would normally do with most JavaScript).



// Pre load images for rollover
if (document.images) {
	smile = new Image
	nosmile = new Image

	smile.src = "/pix/smile.gif"
	nosmile.src = "/pix/nosmile.gif"
}
else {
	smile = ""
	nosmile = ""
}

The if, else checks if the browser can perform image rollovers. These browsers include the document.images object (which was implemented in JavaScript 1.1 and all subsequent versions).

Your image rollover using your preloaded images


<a href="http://www.quackit.com/javascript/image_rollovers.cfm"
onMouseOver="document.jack.src=smile.src"
onMouseOut="document.jack.src=nosmile.src">
<img src="/pix/nosmile.gif"
	width="100"
	height="100"
	border="0"
	name="jack">

This part is similar to the basic image rollover, but it is now calling the preloaded images - so there shouldn't be any delay when you hover over them!

Image rollovers and functions

You could go a step further and stick your image rollover code into a function. This can be handy if you have multiple image rollovers because you only need to write the code in one place, then call the function whenever you perform an image rollover - you don't need to write lots of duplicate code.

The image rollover function:


// Pre load images for rollover
if (document.images) {
	smile = new Image
	nosmile = new Image

	smile.src = "/pix/smile.gif"
	nosmile.src = "/pix/nosmile.gif"
}


function swapImage(thisImage,newImage) {
	if (document.images) {
		document[thisImage].src = eval(newImage + ".src")
	}
}

Calling the rollover function:


<a href="http://www.quackit.com/javascript/image_rollovers.cfm"
onMouseOver="swapImage('jack','smile')"
onMouseOut="swapImage('jack','nosmile')">
<img src="/pix/nosmile.gif"
	width="100"
	height="100"
	border="0"
	name="jack">
</a>

Using the above function, if a browser doesn't support the document.images object, then it will simply ignore the code - there's no need for an else in this case.

Have you met Jack's brothers?

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/javascript/image_rollovers.cfm">Image Rollovers</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites