Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org
#

Q882 How can I show a layer when a mouse moves over a link, but ensure that the layer is positioned next to the mouse pointer.?

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>

Feedback on 'Q882 How can I show a layer when a mouse moves over a link, but ensure that the layer is positioned next to the mouse pointer.?'

©2018 Martin Webb