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

Q225 Is it possible to select a portion of a mapimage and have some text appear in another area of same page?

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

On the latest version 4 browsers its possible to use "layers" and CSS to show and hide portions of HTML:

<HEAD>
<STYLE type="text/css"><!--
#text1 { position: absolute; top: 2in; left: 5in; width: 2in; visibility: hidden; }
#text2 { position: absolute; top: 2in; left: 5in; width: 2in; visibility: hidden; }
--></STYLE>

<SCRIPT LANGUAGE="JavaScript"><!--
if (document.layers)
    var doc = 'document.', vis = '.visibility';
if (document.all)
   var doc = 'document.all.', vis = '.style.visibility';

function show(object) {
    if (document.layers || document.all)
        eval(doc + object + vis + ' = "visible"');
}

function hide(object) {
    if (document.layers || document.all)
        eval(doc + object + vis + ' = "hidden"');
}

function hideAll() {
    hide('text1');
    hide('text2');
}
//--></SCRIPT>

</HEAD>

<BODY>

<DIV ID="text1">
<P>Place your text in here that you want to be displayed
</DIV>

<DIV ID="text2">
Place some alternative text in here, <B>Note</B> you can include HTML within these areas.
</DIV>

<MAP NAME="image-map">
<AREA SHAPE="RECT" COORDS="0,0,49,100" HREF="apage.html" onMouseOver="hideAll();show('text1')" onMouseOut="hideAll()">
<AREA SHAPE="RECT" COORDS="50,0,100,100" HREF="bpage.html" onMouseOver="hideAll();show('text2')" onMouseOut="hideAll()">
</MAP>

<IMG SRC="image.gif" BORDER="0" WIDTH="100" HEIGHT="100" USEMAP="#image-map">

</BODY>
</HTML>

The following was submitted anonymously:

This is what it should look like:

<head>
<style type="text/css"><!--
#image1  { position: absolute; width: 400; visibility: visible; }
#image1a { position: absolute; top: 25; left: 25;  width: 150; visibility: hidden; }
#image1b { position: absolute; top: 25; left: 225; width: 150; visibility: hidden; }
--></style>

<script language="JavaScript"><!--
if (document.layers)
    var doc = 'document.image1.document.', vis = '.visibility';
if (document.all)
   var doc = 'document.all.', vis = '.style.visibility';

function show(object) {
    if (document.layers || document.all)
        eval(doc + object + vis + ' = "visible"');
}

function hide(object) {
    if (document.layers || document.all)
        eval(doc + object + vis + ' = "hidden"');
}

function hideAll() {
    hide('image1a');
    hide('image1b');
}
//--></script>

</head>

<body>

<br><br><br><br><br><br>
<map name="image-map1">
  <area shape="rect" coords="26,24,175,374"  href="#" onMouseover="show('image1a')">
<area shape="rect" coords="225,25,375,375" href="#" onMouseover="show('image1b')">
</map>
<span id="image1"> <img src="image.gif" border="0" width="400" height="400" usemap="#image-map1">
<span id="image1a"> <img src="image1a.gif" border="0" width="150" height="350" OnMouseout="hideAll()">
</span> <span id="image1b"> <img src="image1b.gif" border="0" width="150" height="350" onMouseout="hideAll()">
</span> </span>
</body>
</html>

Feedback on 'Q225 Is it possible to select a portion of a mapimage and have some text appear in another area of same page?'

©2018 Martin Webb