You are here: irt.org | FAQ | DHTML | Q882 [ previous next ]
Try the following:
<style type="text/css"><!-- .myStyle { position: absolute; visibility: hidden; } //--></style> <span id="text1" class="myStyle"> <table bgcolor="#ffffcc"><tr><td> Heres<br>some<br><b>bold<br>text</b><br>in<br>a<br>layer </td></tr></table> </span> <span id="text2" class="myStyle"> <table bgcolor="#ffffcc"><tr><td> Heres<br>some<br><i>italic<br>text</i><br>in<br>a<br>layer </td></tr></table> </span> <span id="text3" class="myStyle"> <table bgcolor="#ffffcc"><tr><td> Heres<br>some<br><font color="#ff0000">red<br>text</font><br>in<br>a<br>layer </td></tr></table> </span> <script language="JavaScript"><!-- function show(object,e) { if (e != '') { if (document.all) { x = e.clientX; y = e.clientY; } if (document.layers) { x = e.pageX; y = e.pageY; } } if (document.layers && document.layers[object] != null) { document.layers[object].left = x; document.layers[object].top = y; } else if (document.all) { document.all[object].style.posLeft = x; document.all[object].style.posTop = y; } 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) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; } //--></script> <table><tr> <td> <a href="#" onMouseOver="if (window.event || document.layers) show('text1',event)" onMouseOut="hide('text1')">Reveal layer 1</a> </td> <td> <a href="#" onMouseOver="if (window.event || document.layers) show('text2',event)" onMouseOut="hide('text2')">Reveal layer 2</a> </td> <td> <a href="#" onMouseOver="if (window.event || document.layers) show('text3',event)" onMouseOut="hide('text3')">Reveal layer 3</a> </td> </tr></table>