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>