Low Bandwidth Rollovers: BGcolor Clipping

One Image Rollover:clipping the background color on the fly

Many rollovers presently in use on the web use a second image with
just a highlight color. With Dynamic HTML, we can achieve this effect
without the second image:

Pass your mouse over the menu below:

Here we are clipping a solid color element. This color is the
element's background color. No second image is required.

This very simple effect is similar in most details to our 2 image
rollover previously discussed. We use exactly the same
clipping method. There are, however, two minor but important
changes:

The element we are clipping is behind the menu image. It is therefore loaded first.

Our original image must be transparent to allow the clipped single color element to show through.

Step by Step

Declare the CSS elements.
elMenuBG
takes the place of
elMenuOver from the
previous example. This element is just one solid color
assigned by the value of the background-color property. In the stylesheet,
therefore, define both the
clip
property and the
background-color property.

Our JavaScript does not need the string variables we used
before, since elMenuBG is,
by definition, blank and will not be rendered by older browsers;Our
array remains the same; and mapOver is redefined to clip elMenuBG.