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.
<![CDATA[<HEAD>
.
.
.
<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.
<![CDATA[<DIV ID="elMenu">
<DIV ID="elMenuBG"></DIV>
<DIV ID="elMenuIMG">
<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="/cgi-bin/suggest.cgi"
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
