Low Bandwidth Rollovers: the full code | WebReference

Low Bandwidth Rollovers: the full code

Logo

Low-Bandwidth Rollovers:
SPECIAL EDITION; the director's cut


Backward Compatibility

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"&gt 
<!--
    #elMenu { position: relative }
    #elMenuUp { 
        position: absolute;
        top: 0;
        left: 0
    }
    #elMenuOver {
        position: absolute;
        visibility: hidden;
        top: 0;
        left: 0
    }
-->
</STYLE&gt
<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="/contact.php"
    onMouseOver="mapOver(2,true)" onMouseOut="mapOver(2,false)">
  <AREA SHAPE="RECT" COORDS="182,0 222,18" HREF="https://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>
.
.
.

What About onMouseDown and onMouseUp?

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

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

URL: https://www.webreference.com/dhtml/column2/allcode.html