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>