| Rollover graphics are images that seem to change when the visitor rolls over them with the mouse pointer. This effect is actually something of a magic trick, because the graphic doesn't really change. Instead, there are two separate graphics files, and a JavaScript function pulls the old switcheroo, swapping between the two images depending on the position of the mouse pointer. GEEKSPEAK A rollover graphic is an image that seems to change when the visitor rolls over it with the mouse pointer. |
To create a rollover graphic, then, you need three things: The default image file, or the normal state of the rollover The onMouseOver image file, or the image that appears when the visitor mouses over the rollover A JavaScript function that swaps between the images
You can use any two image files for the rollover. They don't have to look similar. They don't even need the same physical dimensions. That said, rollovers work best when the graphic files are different versions of the same image with the same dimensions. The rollover effect creates a kind of animation this way, and you get better consistency, because the default image doesn't seem to disappear or change drastically on the visitor. TIP Rollover graphics make excellent nav-bar buttons. The extra visual feedback of the rollover effect reinforces the button's clickability. |
TIP For best results, always specify width and height attributes in the img tag of a rollover graphic. This way, if the onMouseOver image has different dimensions than the default image, the browser resizes the onMouseOver image to match the default image. Otherwise, the browser inserts the onMouseOver image at its native size and redraws the entire screen. Even more annoyingly, if the change in size causes the mouse pointer to fall outside the area of the onMouseOver image, the rollover function automatically swaps the default image back in, and you get a strobe effect. |
The JavaScript function is the secret ingredient that makes the rollover work. It relies on the extremely useful getElementById method, which recent versions of the most popular browsers support. Quite simply, the function locates the image you want to swap according to its ID code, and then it changes the source of that image from the default version to the onMouseOver version or from the onMouseOver version back to the default. Two different JavaScript events on the image call the rollover function. The onMouseOver event triggers the switch from the default to the rolled-over state, and the onMouseOut event triggers the switch back. Without the onMouseOut event to return things to normal, the rollover image gets stuck in its rolled-over state, no matter where the visitor moves the mouse pointer.  | TOOL KITRollover Graphics This DHTML document demonstrates how to create a rollover effect. [View full width] <html> <head> <title>Rollover Graphics</title> <script language="JavaScript"> function doRollover(imageID, imageSource) { /* This function takes two variables: imageID (the ID of the  image you want to change) and imageSource (the path to the image file you want to swap in). A single JavaScript statement utilizing both variables does the trick. */ document.getElementById(imageID).src = imageSource; } </script> </head> <body> <!-- For the purposes of this demo, a single rollover image appears here, but you can fill the body of the document with whatever content you want. --> <img docEmphStrong">imageid" src="imagepath" width="imagewidth" height="imageheight" onMouseOver="doRollover('rolloverid', 'mouseoverimagepath');" onMouseOut="doRollover('rolloverid', 'defaultimagepath');"> <!-- Notes: imageid is a unique string that identifies the image, such as img01 or happyface. Give every image on your page a different ID. imagepath is the path to the image, such as images/icecream.jpg. This path can be document-relative, root-relative, or absolute. imagewidth and imageheight are the width and height of the image in pixels. rolloverid is the ID of the target image, which is the image you want to change with the rollover function. For a normal rollover, rolloverid is the same as imageid. For a disjointed rollover, rolloverid is the ID of whatever image you want to change. Make sure you enclose this value in single quotes. mouseoverimagepath is the path to the rolled-over version of the image, such as images/icecream_ro.jpg. The path can be document-relative, root-relative, or absolute. Put the entire path between single quotes. defaultimagepath is the path to the default version of the image. Again, the path can be document-relative, root-relative, or absolute, and be sure to put the entire path between single quotes. For a normal rollover, defaultimagepath is the same as imagepath. For a disjointed rollover, defaultimagepath is the same as the src attribute of the target image. --> </body> </html>
|
|
TIP You can use the same function to create a disjointed rollover, or an image that triggers a rollover effect not for itself but for a different image entirely. To do this, define the onMouseOver and onMouseOut events in the trigger image, but point the function to the ID of the image that you want to change instead of the trigger image's own ID. |
TIP A few words on nomenclature: Do yourself a favor and name the onMouseOver image the same as the default image with the addition of a suffix like _ro or _over. For example, if your default image is button.gif, make the onMouseOver image button_ro.gif or button_over.gif. This helps you to keep track of your images. Of course, different designers have different preferences for naming their images. One of the editors of this book prefers a system like this: NavHomeOff.gif for the default image and NavHomeOn.gif for the rollover. Use whatever system makes sense to you. But all designers agree that you should use one system or another. About IDs: If you're at a loss as to what IDs to use, just come up with a generic prefix such as img and number your images like this: img01, img02, img03, and so on. You can use the filenames for the images as their IDs, but only if the same image doesn't appear more than once on the same page. Remember, each image needs to have a unique ID. |
|
