Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > PHP/MySQL/Scripting

How to Create Rollovers with JavaScript

  • Print
  • + Share This
This article, from Javascript for the World Wide Web: Visual QuickStart Guide, 3e, shows how to create simple rollovers, how to avoid some common rollover mistakes, and how to enhance your rollovers to make them more effective.
From the author of

THE IDEA BEHIND ROLLOVERS IS SIMPLE. You have two images. The first, or original image is loaded and displayed along with the rest of the Web page by the user. When the user moves the mouse over the first image, the browser quickly swaps out the first image for the second, or replacement image, giving the illusion of movement or animation.

Script 1 (see the next page) gives you the bare-bones rollover; the whole thing is done within a standard image link. First a blue arrow is loaded (Figure 1), then it is overwritten by a red arrow when the user moves the mouse over the image (Figure 2). The blue arrow is redrawn when the user moves the mouse away.

Figure 1   

The first image, before the user moves the mouse over it.

Figure 2   

When the mouse is over the image, the script replaces the first image with the second image.

  • + Share This
  • 🔖 Save To Your Account