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?