JavaScript : Creating A Rollover
Mikael Le Moal


You have probably already seen images bound to links that change when flown over by the mouse pointer... This is called a rollover, one of the most common applications of JavaScript.

It is often applied in the form of a thumbnail image or icon facing a link anchor text, which changes when the mouse comes into the link area and reappears when the pointer leaves the area. This workshop will teach you how to implement such effects and more complex ones too.

Rollover A simple rollover

A three-position rollover using style sheets

A rollover using Internet Explorer transition filters

A rollover using Internet Explorer transparency filters

Back to the source. It will be easier to follow this workshop if you have a look at the complete source code of our example.



Contents:

- Image Preloading

- Simple Rollover

- Using Style Sheets

- Internet Explorer Filters: Transparency

- Internet Explorer Filters: Transition