| home / experts / dhtml / column2 |
  
|
|
In our previous column, we
discussed using recognition of objects as an identifier of
browser capabilities. But
what if we wanted to control what is actually written to the page as it loads?
In our present example, browsers that do not have
positioning capabilities would load our second image below the first one
and both would be visible.
We will use JavaScript to write the value of a string variable when the time comes for our second image to be loaded. If a version 4 browser is being used, the second image is loaded. If not, an empty string is written to the page, resulting in no second image.
<HEAD>
.
.
.
<STYLE TYPE="text/css">
<!--
#elMenu { position: relative }
#elMenuUp {
position: absolute;
top: 0;
left: 0
}
#elMenuOver {
position: absolute;
visibility: hidden;
top: 0;
left: 0
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
ver4 = (IE4 || NS4) ? 1 : 0;
if (ver4) {
secondIm = "<IMG SRC='menuover.gif' USEMAP='#mpMenu' WIDTH=468 HEIGHT=18 BORDER=0>";
arPopups = new Array()
}
else { secondIm = "" }
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.elMenuOver.style }
else { whichEl = document.elMenu.document.elMenuOver };
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>
.
.
.
</HEAD>
<BODY>
.
.
.
<DIV ID="elMenu">
<DIV ID="elMenuUp">
<IMG SRC="menu.gif" USEMAP="#mpMenu" WIDTH=468 HEIGHT=18 BORDER=0>
</DIV>
<DIV ID="elMenuOver">
<SCRIPT LANGUAGE="JavaScript">document.write(secondIm)</SCRIPT>
</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>
.
.
.
After all the hoopla of our last column on these two new mouse event handlers, why didn't we mention them in the context of this example? Because Netscape did not assign these events to the AREA object. A horribly long workaround is possible, but more trouble than it is worth.
However, these events do work in Explorer!! The next page shows you how.
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: 08/06/97
Revised: 10/16/97
URL: http://www.webreference.com/dhtml/column2/allcode.html
