Home Articles FAQs XREF Games Software Instant Books About Feedback Search Site-Map
irt.org logo

Q818 How can I combine image highlighting with the dynamic tooltips script?

irt.org | Knowledge Base | DHTML | Q818 [ previous next ]

Q818 How can I combine image highlighting with the dynamic tooltips script?

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>

Provide feedback ...
AddThis Social Bookmark Button

Provide feedback ... AddThis Social Bookmark Button


Last Updated: 30th March 2008. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.
Copyright © 1996-2008 irt.org, All Rights Reserved.