The links demostrate mouse rollovers. The roll over images are preloaded. The preload technique does not require any further "commuication" with the web server to display the image, so is the fastest rollover method possible, and is almost the most popular and reliable. There are other methods, but none as "good" as the preload algorithm used in these examples. The preload examples can be made "better" by specifying the height and width of the images in the JavaScript code, but this was not done as it prevents the ease of copy and paste.

Use "View Source" or "Save As" to get your own copy of the page.

One Simple Rollover short

Two Simple Rollovers duplicate one simple to create a second.

Two Image Rollover Roll over linked image and it changes and a second image changes too.

Rollovers Explained 10 pages - about 30K

  1. Method to copy, paste, and edit to create more rollovers on one page.
  2. Some basic JavaScript structure discussion.
  3. Explanations at a high level what the mouse rollover code is doing.
  4. Basic lesson for novice javaScript programmer.
  5. Mouse Rollover Design hints.

Future: Zip file of all of the above 18K zip file expands to 30K.

Future: Zip file of the 2 colorized HTML examples above 10K zip file expands to 65K.

© 1998 Copyright by Peter Benjamin. All rights reserved.