JavaScript and Ajax for the Web: Visual QuickStart Guide, Seventh Edition

Creating More Effective Rollovers

To make the illusion of animation work, you need to make sure that the replacement image appears immediately, with no delay while it is fetched from the server. To do that, you use JavaScript to place the images into variables used by your script, which preloads all the images into the browser’s cache (so that they are already on the user’s hard disk when they are needed). Then, when the user moves the mouse over an image, the script swaps out one variable containing an image for a second variable containing the replacement image. Script 4.2 shows how it is done. The visible result is the same as in Figures 4.1 and 4.2, but the apparent animation is smoother.

To keep your JavaScript more manageable, we’ll extract ...