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

Q720 Is it possible to have a small, variable length text description appear when a user passes the pointer over an AREA within an imagemap?

You are here: irt.org | FAQ | DHTML | Q720 [ previous next ]

Try:

<MAP NAME="image-map">
<AREA SHAPE="RECT" COORDS="0,0,100,200" HREF="javascript:alert('testing')"
   onMouseOver="show('text1')" onMouseOut="hide('text1')">
<AREA SHAPE="RECT" COORDS="101,0,200,200" HREF="javascript:alert('testing')"
   onMouseOver="show('text2')" onMouseOut="hide('text2')">
<AREA SHAPE="RECT" COORDS="201,0,300,200" HREF="javascript:alert('testing')"
   onMouseOver="show('text3')" onMouseOut="hide('text3')">
</MAP>

<SPAN ID="big" STYLE="position:absolute; width:300; height:200;">
    <TABLE WIDTH="300" HEIGHT="200" BORDER="0" BGCOLOR="#FFCC00" CELLSPACING="0">
        <TR>
            <TD>
                <IMG NAME="boxImage" SRC="large.gif" BORDER=0 WIDTH=300 HEIGHT=200 USEMAP="#image-map">
            </TD>
        </TR>
    </TABLE>
</SPAN>

<SPAN ID="text1" STYLE="position:absolute; width:100; height:25; visibility: hidden;">
    This is some text...
</SPAN>

<SPAN ID="text2" STYLE="position:absolute; width:100; height:25; visibility: hidden;">
    This is some more text...
</SPAN>

<SPAN ID="text3" STYLE="position:absolute; width:100; height:25; visibility: hidden;">
    This is yet some more text...
</SPAN>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
function show(object) {
    if (document.layers && document.layers[object])
        document.layers[object].visibility = 'visible';
    else if (document.all)
        document.all[object].style.visibility = 'visible';
}

function hide(object) {
    if (document.layers && document.layers[object])
        document.layers[object].visibility = 'hidden';
    else if (document.all)
        document.all[object].style.visibility = 'hidden';
}

if (document.layers) {
    document.layers['big'].left = 50;
    document.layers['big'].top = 50;
    document.layers['text1'].left = 55;
    document.layers['text1'].top =  55;
    document.layers['text2'].left =155;
    document.layers['text2'].top = 150;
    document.layers['text3'].left =255;
    document.layers['text3'].top = 185;
}
else if (document.all) {
    document.all('big').style.posLeft = 50;
    document.all('big').style.posTop = 50;
    document.all('text1').style.posLeft = 55;
    document.all('text1').style.posTop =  55;
    document.all('text2').style.posLeft =155;
    document.all('text2').style.posTop = 150;
    document.all('text3').style.posLeft =255;
    document.all('text3').style.posTop = 185;
}

//--></SCRIPT>

Feedback on 'Q720 Is it possible to have a small, variable length text description appear when a user passes the pointer over an AREA within an imagemap?'

©2018 Martin Webb