Low Bandwidth Rollovers: CSS Visibility

The visibility property
now you see it, now you don't

The visibility property sets the initial value in our stylesheet. After the page has been loaded and displayed, we can modify this property using JavaScript. This property is reflected in JavaScript as: elementName.visibility and can be modified using:

elementName.visibility = "visible"   or 
elementName.visibility = "hidden"
The original CSS declaration value is without quotes("). JavaScript reference is with quotes.
Communicator and Explorer differ, surprise-surprise, in the way they reference CSS named elements.
In the Netscape object model, every positioned element
that defines a new coordinate system is accorded a new 
document
property, which in turn is a new object with properties and methods
similar to the initial window's
document object. In our example, the outer element is 
document.elMenu, while the inner elements are 
document.elMenu.document.elMenuUp and
document.elMenu.document.elMenuOver.
The Explorer model has a collection called 
all
which contains, essentially, every object in the document. Our elements would therefore be:
document.all.elMenu, 
document.all.elMenuUp and
document.all.elMenuOver.

The two browsers also differ in the way they reference the CSS properties of an element.
Netscape assigns the property directly to the object, so we have:
document.elMenu.visibility.

Explorer regards CSS properties as belonging to the object's style:
document.all.elMenu.style.visibility
Toggling Visibility
Let's write a function to toggle the visibility of the hidden image,
which will be called by the 
onMouseOver and 
onMouseOut 
event handlers in our image map:
IE4 = (document.all) ? 1 : 0;       // initialize browser..
NS4 = (document.layers) ? 1 : 0;    // identification and...
ver4 = (IE4 || NS4) ? 1 : 0;        // DHTML variables
function mapOver(on) {
    if (IE4) {                      // check for MSIE4
        whichEl = document.all.elMenuOver.style         // and assign MSIE alias
    }
    else {                                              // or...
        whichEl = document.elMenu.document.elMenuOver   // assign Netscape alias
    };
        if (on) { whichEl.visibility = "visible" }
           else { whichEl.visibility = "hidden" }
}
Modify the image map:
<MAP NAME="mpMenu">
  <AREA SHAPE="RECT" COORDS="0,0 116,18" HREF="/"
    onMouseOver="mapOver(true)" onMouseOut="mapOver(false)">
  <AREA SHAPE="RECT" COORDS="117,0 181,18" HREF="/contact.php"
    onMouseOver="mapOver(true)" onMouseOut="mapOver(false)">
  <AREA SHAPE="RECT" COORDS="182,0 222,18" HREF="https://www.coolcentral.com"
    onMouseOver="mapOver(true)" onMouseOut="mapOver(false)">
  <AREA SHAPE="RECT" COORDS="223,0 263,18" HREF="/new/"
    onMouseOver="mapOver(true)" onMouseOut="mapOver(false)">
  <AREA SHAPE="RECT" COORDS="264,0 339,18" HREF="/headlines/"
    onMouseOver="mapOver(true)" onMouseOut="mapOver(false)">
  <AREA SHAPE="RECT" COORDS="340,0 397,18" HREF="/search.cgi"
    onMouseOver="mapOver(true)" onMouseOut="mapOver(false)">
  <AREA SHAPE="RECT" COORDS="398,0 468,18" HREF="/index2.html"
    onMouseOver="mapOver(true)" onMouseOut="mapOver(false)">
</MAP>

Try this code on the image below:






Notice the erratic behaviour in your status bar (in NS) or the lack of link association (in IE).
We must define Image2 as an image map in its own right and associate it with the same map tag:
IMG SRC="menuover.gif" USEMAP="#mpMenu" WIDTH=468 HEIGHT=18 BORDER=0
Now try it:






So far, we have accomplished two of our objectives. We have positioned
two objects in the same space and we have written script to toggle the
visibility of the hidden one. We still need to clip the object so
that only the required part is shown.
  


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/visible.html