Full version: jsB@nk » Link » Tooltip » Show/hide layer
URL: https://www.javascriptbank.com/show-hide-layer.html
Move the cursor over JavaScript menu items and the layers would appear. This JavaScript allows to show and hide layes for a set of main brousers (IE 4 and above, Opera 5 and above, NN 4 and above, Mozilla). The script could be used to construct pull-down menus.
Full version: jsB@nk » Link » Tooltip » Show/hide layer
URL: https://www.javascriptbank.com/show-hide-layer.html
<SCRIPT language=JavaScript><!-- // Hide from old browsers // Maryanna Nesina// [email protected]// This script allows to show and hide layes for a set of main brousers// And can be used to construct pull-down menus// All the Layers get names from menu0 to menu_vith_nomber_m// If we want to hide all the layers // we call showmenu() function without parametrs// i.e. using onMouseOver evantfunction DOMGetElement(xx) { // This function returns document's elemtnt acording it's name // Using Document Object Model if (document.getElementById) return document.getElementById(xx); return nul;}function showmenu(name) {// This is the main function that hide all the layers but the only one, // which name was delivered to the function as a parametrvar ii; // cicle variablevar m=2; // variable that shows maximum nomber in layers' names var qq; // here we store the name of a layer that we must showvar nen; // here we store the names of all layers (in a cicle)NeMenu = new Array(m+1); // an array to store the objects - all the layers that should be hiddennename = new Array(m+1); // an array to store the names of all the layers that should be hidden// cicle to store the names of all the layers that should be hidden an arrayfor (ii=0; ii<=m; ii++) { nen="menu" + ii; nename[ii]=nen; if (name) { // this if (nen==name) qq=ii; // flag on - if it's a name of a layer hat should be shown }}// than we should show one layer and hide all the others (in a cicle)// we do it for all the main types of brousers if (document.getElementById) { // Type 1: IE5,6; NN6; Mozilla // if our brouser supports DOM and we can get an object according to it's name if (name) { // if there was a parametr var Menu = DOMGetElement(name); // get an object Menu.style.visibility='visible'; // and show it, changing the style } for (ii=0; ii<=m; ii++) { // for all the layers if (ii!=qq) { // but one that should be shown NeMenu[ii] = DOMGetElement(nename[ii]); // get an object that we do NOT show NeMenu[ii].style.visibility='hidden'; // and hide it, changing the style } } return true; // exit function } // that's all for the first type of brousers if(document.all) { // Type 2: For document.all stands IE4-6 and Opera5, but IE5,6 were gone as the 1-st type if (name) document.all[name].style.visibility= 'visible'; //if there was a parametr, show that layer using style for (ii=0; ii<=m; ii++) { // hide all the layers but one that should be shown - using style if (ii!=qq) document.all[nename[ii]].style.visibility= 'hidden'; } return true; // exit function } // that's all for the second type of brousers if (document.layers) { //Type 2: NN4 if (name) document.layers[name].visibility='show'; // if there was a parametr, show that layer using layer for (ii=0; ii<=m; ii++) { // hide all the layers but one that should be shown - using layer if (ii!=qq) document.layers[nename[ii]].visibility='hide'; } return true; // exit function } // that's all for the second type of brousers (NN4)} //--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE width="75%" border=1> <TBODY> <TR> <TD bgColor=#00ccff><A onmouseover="showmenu('menu0')" onmouseout=showmenu() href="">This is the first item - move your cursor over it </A> <DIV id=menu0 style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 490px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 211px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 35px; HEIGHT: 95px; BACKGROUND-COLOR: #006633; layer-background-color: #006633"> <P>That is the first layer</P> <P>It is green</P></DIV></TD> <TD> </TD> <TD bgColor=#00ccff> </TD></TR> <TR> <TD><A onmouseover="showmenu('menu1')" onmouseout=showmenu() href="">This is the second item - move your cursor over it </A> <DIV id=menu1 style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 2; LEFT: 57px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 204px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 75px; HEIGHT: 94px; BACKGROUND-COLOR: #3300ff; layer-background-color: #3300FF"> <P>That is the second layer</P> <P>It is blue</P></DIV></TD> <TD bgColor=#00ccff> </TD> <TD> </TD></TR> <TR> <TD bgColor=#00ccff><A onmouseover="showmenu('menu2')" onmouseout=showmenu() href="">This is the third item - move your cursor over it </A> <DIV id=menu2 style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 3; LEFT: 157px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 204px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 125px; HEIGHT: 94px; BACKGROUND-COLOR: #ffffff; layer-background-color: #FFFFFF"> <P>That is the third layer</P> <P>Can your see it?</P></DIV></TD> <TD> </TD> <TD bgColor=#00ccff> </TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->