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 how Dreamweaver's complex code to create the rollover effect.

Bach head shot Mozart head shot Beethoven head shot Chopin head shot
J. S. Bach W. A. Mozart L. v. Beethoven F. Chopin

The same effect can be produced with much simpler JavaScript but it requires a knowledge of the language that few music teachers acquire. Here is a page using the simpler code. The functionality is identical but it is useful to compare efficient hand-coded JavaScript to the bloated prepackaged behaviors created by programs like DreamWeaver.