You are here: irt.org | FAQ | DHTML | Q818 [ previous next ]
Try the following:
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!-- if (document.images) { var image1on = new Images(); image1on.src = 'image1on.gif'; var image1off = new Images(); image1off.src = 'image1.gif'; var image2on = new Images(); image2on.src = 'image2on.gif'; var image2off = new Images(); image2off.src = 'image2off.gif'; } function show(object,image) { if (document.images) { document.images[image].src = image + 'on.gif'; } if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; } function hide(object,image) { if (document.images) { document.images[image].src = image + '.gif'; } if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; } //--></SCRIPT> <STYLE TYPE="text/css"><!-- .myStyle { position: absolute; visibility: hidden; } //--></STYLE> <A HREF="#" onMouseover="show('myLayer1','image1')" onMouseout="hide('myLayer1')"><IMG SRC="picture1.gif" NAME="image1" WIDTH="100" HEIGHT="100"></A> <DIV ID="myLayer1" CLASS="myStyle"> <TABLE BGCOLOR="#FFFFCC"><TR><TD> This text is hidden from view.<BR>It is revealed when the mouse<BR>moves over the 1st link text </TD></TR></TABLE> </DIV> <A HREF="#" onMouseover="show('myLayer2','image2')" onMouseout="hide('myLayer2')"><IMG SRC="picture2.gif" NAME="image2" WIDTH="100" HEIGHT="100"></A> <DIV ID="myLayer2" CLASS="myStyle"> <TABLE BGCOLOR="#FFFFCC"><TR><TD> This text is also hidden from view until it is revealed when the mouse moves over the 2nd link text </TD></TR></TABLE> </DIV>