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.
BUG Note
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.
Our script becomes:
- <SCRIPT LANGUAGE="JavaScript">
<!--
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
ver4 = (IE4 || NS4) ? 1 : 0;
function setBeginEnd(which,from,to) {
arPopups[which] = new Array();
arPopups[which][0] = from;
arPopups[which][1] = to;
}
if (ver4) {
setBeginEnd(1,0,116);
setBeginEnd(2,117,181);
setBeginEnd(3,182,222);
setBeginEnd(4,223,263);
setBeginEnd(5,264,339);
setBeginEnd(6,340,397);
setBeginEnd(7,398,468);
}
clTop = 0;
clBot = 18;
function mapOver(which,on) {
if (!ver4) { return }
if (IE4) { whichEl = document.all.elMenuBG.style }
else { whichEl = document.elMenu.document.elMenuBG };
if (!on) { whichEl.visibility = "hidden"; return }
clLeft = arPopups[which][0];
clRight = arPopups[which][1];
if (NS4) {
whichEl.clip.left = clLeft;
whichEl.clip.right = clRight;
}
else {
whichEl.clip = "rect(" + clTop + " " + clRight + " " + clBot + " " + clLeft + ")";
}
whichEl.visibility = "visible"
}
//-->
</SCRIPT>
Our
<BODY>
HTML is completely backward compatible because
elMenuBG
is an empty element. Remember it must preceed our image in the page. Our MAP remains the same.
And now, a Rollover with 0 (zero) Images
This one is up to you. Try using what we have discussed to create a text-based rollover. Send it to us. If it works, we'll mention it in a future column.
HINT
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.Created: 08/06/97
Revised: 10/16/97
URL: https://www.webreference.com/dhtml/column2/bgcolor.html
Find a programming school near you