|
| Summary of Content |
| A couple of nice pieces of javascript to control the display of layers. Using the getElementByID property. The first one is very simple allowing the control of each specific layer. Multiple layers require multiple statements. The second script extends the first, by using an array, and allows opening or closing of all layers in one command. Ensure all layers have a unique id. Tip: If using a lot of layers, define their styles in CSS it will make the coding much more manageable. |
| Script located in the Head Section |
|
<script language="JavaScript" type="text/JavaScript"> |
| In this example a radio button to toggle visibility located in the body section |
| <input type="radio" name="r1" value="Show1" onClick="ShowLayer('Layer1');HideLayer ('Layer2'); ShowLayer ('Layer3')"> |
| above script extended to open or close all layers in one command as well |
| all layers are initially included in an array |
| <script language="javascript"> <!-- mydivs=new Array() // All layer id's to be included in All Hide, All Show mydivs[0]="Layer1" mydivs[1]="Layer2" mydivs[2]="Layer3".......etc. function HideAllLayers() { for(i=0;i<mydivs.length;i++) { document.getElementById(mydivs[i]).style.visibility="hidden"; } } function ShowAllLayers() { for(i=0;i<mydivs.length;i++) { document.getElementById(mydivs[i]).style.visibility="visible"; } } function HideLayer(id) { document.getElementById(id).style.visibility="hidden"; } function ShowLayer(id) { document.getElementById(id).style.visibility="visible"; } // --> </script> |
| the body section |
| In this example a piece of text to hide all layers |
| <div id="A piece of text" OnMouseOver="HideAllLayers();"> |
| In this example a piece of text to show all layers |
| <div id="A piece of text" OnMouseOver="ShowAllLayers();"> |
| Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL) |
|
Last Update: 04/03/2008 - Layers (e.g Copyrights etc.) - Javascripts - Neils Resource Web
