Code for DHTML Example - William M. Pegram

The code below shows how to use make text appear and disappear when you mouseover a link. The techniques used below, i.e.

giving a message an id
in a style sheet, setting the visibility of this message initially to hidden in a style sheet
in JavaScript, changing the visibility to visible in response to an event and changing the visibility back to hidden in response to another event

can be applied to a wide variety of situations. For example, in form verification, instead of merely responding to a user event, the user event triggers a test, and then the visibility of the message is determined by the results of this test.


<html>

<head>

<style>

#t1 { position:relative; visibility: hidden;}

</style>

<!-- One must specify the position attribute for the visibility attribute to work in Netscape 4.7
-->

</head>



<body>

The following message should be initially hidden, appear when you mouseover the link, and then disappear when you move off:

<div id="t1">Hello this is a message </div>

<a href="" 

onMouseover="if (document.layers) document.t1.visibility='visible'; 

             if (document.all) document.all.t1.style.visibility='visible';

             if (document.getElementById)
document.getElementById('t1').style.visibility='visible';" 



onMouseOut="if (document.layers) document.t1.visibility='hidden';

            if (document.all) document.all.t1.style.visibility='hidden';

   if (document.getElementById) document.getElementById('t1').style.visibility='hidden';">

Link</a>

<!-- The IE code is the same as the Netscape code except that one adds the word

all between the document and object name and adds the word style between the object

name and the property; the W3C DOM Compliant code (IE5 and later, Netscape 6 and later) is the same as
the IE code except that all.elementid is replaced by getElementById(elementid) -->



</body>

</html>
Revised: March 5, 2002