Low Bandwidth Rollovers: BGcolor Clipping | WebReference

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: Netscape, presently, has a well-documented CSS background-color inheritance bug. We therefore use the proprietary CSS property layer-background-color. Explorer will ignore it.

. . . <style type="text/css"><!-- #elMenu { position: relative } #elMenuBG { position: absolute; top: 0; left: 0 clip: rect(0 468 18 0); background-color: #DDDDDD; layer-background-color: #DDDDDD } #elMenuIMG { position: absolute; top: 0; left: 0 } --></style>

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.

<div> <div> <div> <img src="menu.gif" usemap="#mpMenu" width="468" height="18" border="0"/></div> </div> . . . <map name="mpMenu"><area shape="RECT" coords="0,0 116,18" href="/" onmouseover="mapOver(1,true)" onmouseout="mapOver(1,false)"/><area shape="RECT" coords="117,0 181,18" href="/contact.php" onmouseover="mapOver(2,true)" onmouseout="mapOver(2,false)"/><area shape="RECT" coords="182,0 222,18" href="http://www.coolcentral.com" onmouseover="mapOver(3,true)" onmouseout="mapOver(3,false)"/><area shape="RECT" coords="223,0 263,18" href="/new/" onmouseover="mapOver(4,true)" onmouseout="mapOver(4,false)"/><area shape="RECT" coords="264,0 339,18" href="/headlines/" onmouseover="mapOver(5,true)" onmouseout="mapOver(5,false)"/><area shape="RECT" coords="340,0 397,18" href="/search.cgi" onmouseover="mapOver(6,true)" onmouseout="mapOver(6,false)"/><area shape="RECT" coords="398,0 468,18" href="/index2.html" onmouseover="mapOver(7,true)" onmouseout="mapOver(7,false)"/></map>

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: The next page may give you some ideas.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 08/06/97
Revised: 10/16/97

URL: http://www.webreference.com/dhtml/column2/bgcolor.html