The following is a script to produce "rollover" effects -- swapping an image when the user moves
the mouse over a specific image (this site uses rollovers for the bubble navigation at the
top of each page). If your images are large, or if your page is going to use
more than one or two rollover effects, you should also consider adding a preload function to your page
(click here for preload function).
First, you need to name your images so that the rollover function can deal with them properly. For each
set of rollover images, you need a "before" and "after," the "before" will be your main image, the "after"
will be the image you swap in during the rollover. Make sure they both have the same base name -- for example,
we'll say that we are going to do a rollover for a pair of gifs named "rollovergif.gif". Add a "1" to the
before image, and a "2" to the after image. Before Gif --> "rollover1gif.gif", After Gif --> "rollover2gif.gif".
Next, put the following function in the HEAD of your web page
:
Finally, set up your IMG tags to use the function:
Related Links: Preload Images
Want to discuss this article, or other development issues? Visit our
message boards!
Or contact us directly with a comment or question on this article: click here ! |