TI:ME 2B Internet Authoring Resource Pages

Packaged JavaScript Behaviors

Image Rollovers for Navigation

One of the first uses of JavaScript on the Web was for image swapping where a second image replaces the original image when the visitor rolls the mouse over it. One common way to use image swapping is for navigation icons. In the example below, the four composer images are initially displayed as grayscale images. When the visitor rolls the mouse over each image, the image is replaced with a color version. View the code of this page to see the code to create the rollover effect.

bach
J. S. Bach
mozart
W. A. Mozart
beethoven
L. v. Beethoven
chopin
F. Chopin

DreamWeaver and other Internet Authoring software packages can produce rollover images using prepackaged code. This is a great convenience for those who don't have the time or interest to acquire programming skill. The one downside is that the code produced by DreamWeaver is really difficult to decipher and really can't be altered easily. For example, the programmer on this page altered the code so that rolling the mouse over the text links also produces the image swap. Here is a page using the DreamWeaver code. It is useful to compare efficient hand-coded JavaScript to the bloated prepackaged behaviors created by programs like DreamWeaver.