Resource Web iconResource Web iconUsing Layers - Javascript - Web Dev. - Neils Resource Web

Contract Menu | Expand Menu

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">
<!-- Set Visibility
function ShowLayer(Layer)
{ document.getElementById(Layer).style.visibility="visible"; }

function HideLayer(Layer)
{ document.getElementById(Layer).style.visibility="hidden"; }

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

function HideAllLayers() {
for(i=0;i<mydivs.length;i++) {

function ShowAllLayers() {
for(i=0;i<mydivs.length;i++) {

function HideLayer(id) {

function ShowLayer(id) {
// -->
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)

Top of the PageTop of the PageA double mouse click anywhere on the page will take you back to the top (except when over hyperlinks)

Last Update: 04/03/2008 - Layers (e.g Copyrights etc.) - Javascripts - Neils Resource Web

html 4.01 strict css 2.1 javascript 1.2