Defining Styles and Layers

Our slideshow needs two layers to be defined in the page body:

118: <STYLE TYPE='text/css'>
119: <!--
120: #layer1 {
121: position:absolute;
122: top: 0;
123: left: 0;
124: width: 1;
125: height: 1;
126: z-index: 100;
127: }
128: #layer2 {
129: position:absolute;
130: top: 0;
131: left: 0;
132: width: 1;
133: height: 1;
134: z-index: 200;
135: }
136: -->
137: </STYLE>
[...]
143: <A HREF="img1g.jpg" target="im" Name="l" ><IMG NAME="img" SRC="img1.jpg" BORDER="0" ALIGN="Top"></A>
144: <DIV id="layer1">
145:   <DIV id="layer2">
146:   </DIV>
147: </DIV>

Each layer is defined by a style sheet (lines 118-137). The z-index parameter (lines 126 and 134) is used to assign a stacking index to each layer. In this way, you can choose which layer should be above another one. The first layer, layer1, encompasses the second one, layer2 (lines 144-147). The starting image is also displayed (line 143).

The slideshow is simple to operate. The layer2 layer is moved within the layer1 layer, producing the appearance effect from the bottom or right border of the frame. To display the next image, the underlying image (hidden by the layer2 layer) must first be replaced by the last image displayed and then the animated layer's content can disappear. None of the inner workings are visible to the visitor.

The animated layer's content is then modified again and the movement can be repeated.