| home / experts / dhtml / column2 |
  
|
|
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:
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.
The two browsers also differ in the way they reference the CSS properties of an element.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.
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
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:
Modify the image 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:
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
