Hide and show layer
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh
Publisher: O'Reilly
Series: Cookbooks
ISBN: 1-56592-577-7
*/
<HTML>
<HEAD>
<TITLE>dhtml.js example</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
// dhtml.js
// Set browser-determined global variables
var NN = (document.layers ? true : false);
var hideName = (NN ? 'hide' : 'hidden');
var showName = (NN ? 'show' : 'visible');
var zIdx = -1;
function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy) {
if (NN) {
document.writeln('<LAYER NAME="' + sName + '" LEFT=' + sLeft + ' TOP=' + sTop +
' WIDTH=' + sWdh + ' HEIGHT=' + sHgt + ' VISIBILITY="' + sVis + '"' +
' z-Index=' + zIdx + '>' + copy + '</LAYER>');
}
else {
document.writeln('<DIV ID="' + sName + '" STYLE="position:absolute; overflow:none; left:' +
sLeft + 'px; top:' + sTop + 'px; width:' + sWdh + 'px; height:' + sHgt + 'px;' +
' visibility:' + sVis + '; z-Index=' + (++zIdx) + '">' +
copy + '</DIV>'
);
}
}
// Define a function to hide layers
function hideSlide(name) {
refSlide(name).visibility = hideName;
}
// Define a function to reveal layers
function showSlide(name) {
refSlide(name).visibility = showName;
}
// Define a central function to reference layers
function refSlide(name) {
if (NN) { return document.layers[name]; }
else { return eval('document.all.' + name + '.style'); }
}
</SCRIPT>
</HEAD>
<BODY>
[<A HREF="javascript: hideSlide('myLayer');">Hide</A>]
[<A HREF="javascript: showSlide('myLayer');">Show</A>]
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
genLayer('myLayer', 10, 75, 300, 300, showName, "<BODY BGCOLOR=RED><BR><BR><CENTER><H3>This is a stylesheet. Ain\'t it grand?!</H3></BODY>");
//-->
</SCRIPT>
</BODY>
</HTML>
Related examples in the same category