Low Bandwidth Rollovers: CSS Visibility | WebReference

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

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="http://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: http://www.webreference.com/dhtml/column2/visible.html