»
EnglishFrenchVietnamese

Print - Show/hide layer - JavaScriptBank.com

Full version: jsB@nk » Link » Tooltip » Show/hide layer
URL: http://www.javascriptbank.com/show-hide-layer.html

Show/hide layer © JavaScriptBank.comMove 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: http://www.javascriptbank.com/show-hide-layer.html



JavaScript
<SCRIPT language=JavaScript><!-- // Hide from old browsers // Maryanna Nesina// mar@mail.bio.pu.ru// 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-->


HTML
<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>&nbsp;</TD>    <TD bgColor=#00ccff>&nbsp;</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>&nbsp;</TD>    <TD>&nbsp;</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>&nbsp;</TD>    <TD bgColor=#00ccff>&nbsp;</TD></TR></TBODY></TABLE><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->