[Contents] [Prev page] [Next page] [Last page]

Hiding and Showing Layers
(Fancy Flowers Farm)

This example illustrates how to hide and show layers.

This example creates a web page that has five layers. Four of the layers each contain information about a specific flower, and the fifth layer contains a form with a pop up menu.

You can choose which flower layer to display by using the pop up menu.

To run the example, select:

 Flower.htm

To view the complete code for the example, select:

 flowerht.htm

Introducing the Flower Farm

At the top of the page, we introduce the flower farm:

<HR>
<H1>Welcome to Fancy Flowers Farm </H1>
<HR>
<P>We sell bulbs, seeds, seedlings, and potted plants, 
in all shapes, sizes, colors, and varieties. 
This page presents information about our most popular varieties.</P>

Creating the Form for Flower Selection

The form is placed in a layer. The form contains a popup menu (a select menu) listing four kinds of flowers. The menu uses an onClick event handler, so that when it is clicked, the changeFlower() function is invoked to display the selected flower.

Since the form layer is the first layer in the document, we let it appear where it would naturally fall in the page. That is, we do not specify a TOP value for it.

<LAYER NAME="formlayer" LEFT=50>
<P>Please select a flower:</P>
<FORM NAME=form1>
	<SELECT name=menu1 
	onChange="changeFlower(this.selectedIndex); 
	return false;">
	<OPTION >Mona Lisa Tulip
	<OPTION >Mixed Dutch Tulips
	<OPTION >Bijou Violet
	<OPTION >Punk Chrysanthemum
	</SELECT>
</FORM>
</LAYER>

When you select an option in the menu, the changeFlower() function is invoked. This function calls the hideAllFlowers() function to hide all the flower layers, then shows the flower layer corresponding to the selected option. The flower layers are named flower0, flower1, flower2, and flower3, so that the name of the selected flower layer is simply the concatenation of "flower" and the index of the selected option.

<SCRIPT>
// this function hides all the flower layers
function hideAllflowerLayers() {
	document.layers["flower0"].visibility=hide;
	document.layers["flower1"].visibility=hide;
	document.layers["flower2"].visibility=hide;
	document.layers["flower3"].visibility=hide;
	}
// this function makes a single flower layer visible
function changeFlower(n) {
	hideAllflowerLayers();
	document.layers["flower" + n].visibility=inherit;
}
</SCRIPT>

Positioning the Flower Layers

The page has four layers that contains information about a flower. Each flower layer contains a left-aligned image, a level 3 heading, and some number of paragraphs. The first layer is initially visible and the remaining flower layers are initially hidden.

All the flower layers are positioned in exactly the same place, and they have the same width and height. The idea is that only one flower layer is visible at a time.

So far the page contains one layer, which contains the form. Thus we cannot let the flower layers fall at the current cursor position, or they would overlap the form layer. However, we can position the flower layers immediately below the form layer, by using inline JavaScript to evaluate a value for the TOP attribute.

We can calculate the TOP value of the first flower layer by finding the TOP value of the form layer and adding the height of the form layer's document. For the other flower layers however, we just need to set the TOP value to be the same as the TOP value for the first flower layer.

When positioning layers during initial page layout, it is better to use integer indexes in the layers array rather than using the name of the layer. That is, use layers[0] rather than layers["formlayer"].

The HTML text for the first flower layer is: (notice the double semi-colon at the end of the inline JavaScript)

<LAYER name="flower0" LEFT=50 width=400 
   
TOP=&{"&"};{document.layers[0].top+document.layers[0].document.height;}
;
       BGCOLOR="#FFFFDD">
      <HR>
	<H3>Mona Lisa Tulip</H3>
      <HR>
	<IMG src="images/flowers/redtul.jpg" 
		align="LEFT" hspace=5>
	<P>Information about this flower...</P>	
	<P>More information about this flower...</P>
</LAYER>

The HTML text for the second flower layer is

<LAYER name="flower1" LEFT=50 
   TOP=&{"&"};{document.layers[1].top;};
      width=400 VISIBILITY="HIDE"
      BGCOLOR="#DDFFDD">
      <HR>
	<H3>Mixed Dutch Tulips</H3>
      <HR>
	<IMG src="images/flowers/tulmulti.jpg" 
		align="LEFT"  hspace=5>
	<P>Information about this other flower...</P>	
	<P>More information about this other flower...</P>
</LAYER>

The HTML code for the other two flower layers is similar to the second flower layer, but with information pertaining to other kinds of flowers.



[Contents] [Prev page] [Next page] [Last page]

Copyright © 1997, Netscape Communications. All rights reserved.