Make your own free website on Tripod.com
1   <HTML>
2   <HEAD>
3   <TITLE>slideshow with layers</TITLE>
4    
5   <SCRIPT LANGUAGE="JavaScript">
6   var totalImages = 6;
    //Sets a variable called totalImages equal to the total number of images
//in the rotation. Because this variable is not enclosed in a function, it
//will be available to every function. This kind of standalone variable is
//often referred to as a global variable, although it is not global in the
//traditional programming sense because it is not available to documents in
//other browser windows.
7   var imageShowing = 1;
    //The images in the rotation are enclosed in consecutively-numbered CSS
//layers (image1, image2, etc.) which the upcoming functions cycle through
//by adding one or subtracting one. This line sets a variable equal to
//the number of the layer that is showing so the functions will know where
//to start counting.
8   var layerRef = ""; var styleSwitch = "";
    //Initializes two variables, layerRef and styleSwitch, which will be set to
//different values in the init() function depending on the browser brand.
9    
10   function init(){
 11     if (navigator.appName == 'Netscape'){
12       layerRef = 'document.layers';
        //Sets layerRef equal to the JavaScript
    //syntax Netscape uses to reference layers.
13       styleSwitch = '';
        //Sets styleSwitch equal to an empty string
    //because Netscape references styles directly as
    //properties of the layer object.
14     }
15     else{
      //If the browser is NOT Netscape (the assumption here is that it's IE)...
16       var layerRef = 'document.all';
        //IE can reference layers with just the layer
    //name/ID, but document.all, which is also valid,
    //works better here because it makes Netscape and
    //IE syntax parallel--an essential factor in making the
    //code work on both browsers.
17       styleSwitch = '.style';
        //IE references style properties by inserting ".style"
    //between the object name and the style property
    //(for example, document.all["image1"].style.visibility),
    //so this line sets styleSwitch to .style.
18     }
19     hideLayer('loading');
      //This line calls the hideLayer function (defined below)
  //to hide the layer that says "loading images, please wait...".
  //Since this function call is part of the init() function,
  //which is called by the onLoad event, the layer is
  //hidden only after the rest of the page has loaded.
20     showLayer('image1');
      //This line calls the showLayer function (defined below)
  //to show the first image layer. Since this function call
  //is part of the init() function, which is called by the onLoad event,
  //the layer is shown only after the rest of the page has loaded.
21   }
22    
23   function showNextLayer(){
24   var showThisImage = imageShowing + 1;
    //Sets a variable called showThisImage equal to the next layer number in the
//rotation by adding 1 to the value of imageShowing (which was initialized
//in line 7).
25     if (showThisImage > totalImages){
      //If the value of showThisImage is greater than the total number of images
  //in the rotation...
26       showThisImage = 1;
        //Sets showThisImage equal to 1. This makes the
    //rotation loop so that the user never hits a dead end.
27     }
28   hideLayer(eval('"image' + imageShowing + '"'));
    //Calls the hideLayer() function to hide the layer that is currently
//showing.
29   showLayer(eval('"image' + showThisImage + '"'));
    //Calls the showLayer() function to show the next layer in the
//rotation.
30   imageShowing = showThisImage;
    //Resets imageShowing to the value of showThisImage (the layer that you
//just made visible).
31   }
32    
33   function showPreviousLayer(){
34   var showThisImage = imageShowing - 1;
    //Sets a variable called showThisImage equal to the previous layer number in
//the rotation by subtracting 1 from the value of imageShowing (which was
//initialized in line 7).
35     if (showThisImage < 1){
      //If the value of showThisImage is less than 1...
36       showThisImage = totalImages;
        //Sets showThisImage equal to totalImages, or the
    //last layer number in the rotation.
37     }
38   hideLayer(eval('"image' + imageShowing + '"'));
39   showLayer(eval('"image' + showThisImage + '"'));
40   imageShowing = showThisImage;
41   }
42    
43   function hideLayer(layerID){
44   eval(layerRef + '["' + layerID + '"]' + styleSwitch + '.visibility="hidden"');
    //The built-in JavaScript function eval() evaluates the contents of its
//parentheses, converting variables to their values and concatenating
//all the pieces separated by + signs. If the user's browser is Netscape,
//and the layer to be hidden is called image1, the contents of these
//parentheses will evaluate to 'document.layers["image1"].visibility="hidden"'.
//If the browser is IE, they will evaluate to
//'document.all["image1"].style.visibility="hidden"'.
45   }
46    
47   function showLayer(layerID){
48   eval(layerRef + '["' + layerID + '"]' + styleSwitch + '.visibility="visible"');
49   }
50    
51   </SCRIPT>
52   </HEAD>
53    
54   <BODY onLoad="init()" BGCOLOR="#000000" TEXT="#CCCCCC" LINK="#FFFFFF" VLINK="#999999">
    <!--
The onLoad handler calls the init() function once the page has loaded. init() sets the layerRef and styleSwitch variables to their proper values based on whether the browser is Netscape or IE, hides the "images loading, please wait..." message, and shows the first image layer.
-->
55    
56   <h2><font face="Arial, Geneva, sans-serif">Slideshow with Layers</font></h2>
57    
58   <DIV ID="loading" STYLE="position:absolute; left:250px; top:100px; width:200px; height:200px; visibility:visible">
59     <DIV align="center">
60     <H3><FONT FACE="Arial, Geneva, sans-serif" COLOR="#FFFFFF">loading images, please wait...</FONT></H3>
61     </DIV>
62   </DIV>
63    
64   <DIV ID="image1" STYLE="position:absolute; left:250px; top:100px; width:200px; height:200px; visibility:visible">
    <!--
Defines a CSS layer by assigning a unique ID and positioning STYLE properties. Note that this and all subsequent layers in the rotation are given IDs with the same keyword and consecutive numbers, and that all of them are the same size (200px x 200px). They are also positioned one on top of another at 250px from the left margin and 100px from the top.
-->
65   <IMG SRC="driveway.jpg" WIDTH=200 HEIGHT=200 alt="DRIVEWAY: a gravel driveway in semi-rural Maryland, complete with garbage can lid and bent fly swatter cut by shafts of sunlight.">
    <!--
The image contained in the layer. Its height and width (200x200) match the dimensions of the layer but need not; you can also include text, tables, and other content in your layer if you want. Keeping the layer size and position constant for all 6 layers was a design decision -- we wanted to keep the visitor's attention focused on one spot.
-->
66   </DIV>
67    
68   <DIV ID="image2" STYLE="position:absolute; left:250px; top:100px; width:200px; height:200px; visibility:hidden" >
69   <IMG SRC="allears.jpg" WIDTH=200 HEIGHT=200 alt="ALL EARS: a Warhol-like study of an ear, repeated in the four quadrants of the image">
70   </DIV>
71    
72   <DIV ID="image3" STYLE="position:absolute; left:250px; top:100px; width:200px; height:200px; visibility:hidden">
73   <IMG SRC="speaker.jpg" WIDTH=200 HEIGHT=200 alt="SPEAKER: a rusted 1950s-era speaker from a drive-in movie theater in the Catskill Mountains.">
74   </DIV>
75    
76   <DIV ID="image4" STYLE="position:absolute; left:250px; top:100px; width:200px; height:200px; visibility:hidden">
77   <IMG SRC="safetyfilm.jpg" WIDTH=200 HEIGHT=200 alt="SAFETY FILM: plastic strips labeled 'SAFETY FILM' dangle from a hook in the projection booth at the Hunter Community Theater.">
78   </DIV>
79    
80   <DIV ID="image5" STYLE="position:absolute; left:250px; top:100px; width:200px; height:200px; visibility:hidden">
81   <IMG SRC="bodyparts.jpg" WIDTH=200 HEIGHT=200 alt="BODY PARTS: a shoed foot, a bare elbow, and a bare knee come together in a Maryland back yard.">
82   </DIV>
83    
84   <DIV ID="image6" STYLE="position:absolute; left:250px; top:100px; width:200px; height:200px; visibility:hidden">
85   <IMG SRC="jacket.jpg" WIDTH=200 HEIGHT=200 alt="LAYERS: if you dress in layers, what z-index do you assign your jacket?">
86   </DIV>
    <!--
Because their stacking order is irrelevent--only one layer will be visible at a time--none of the above layers has a z-index.
-->
87    
88   <SCRIPT LANGUAGE="JavaScript">
89   <!--
90   if (parseFloat(navigator.appVersion) >= 4){
    //Earlier browsers deal with DIV layers by ignoring the positioning and
//visibility settings. The DIVs then function like Ps, which makes the
//images line up vertically on the left side of the page. This layer,
//however, would have no meaning if all the images were showing because
//it contains the controls for switching between layers. This script
//therefore writes the layer only if the browser version is greater
//than or equal to 4.
91     document.write('<DIV ID="controls" STYLE="position:absolute; left:250px; top:325px; width:200px; height:50px; z-index:1; visibility:visible">');
92     document.write('<TABLE WIDTH=200 BORDER=0>');
93     document.write('<TR>');
94     document.write('<TD ALIGN=LEFT><A HREF="javascript:showPreviousLayer()"><IMG SRC="left_arrow.gif" WIDTH=32 HEIGHT=32 ALT="back" BORDER=0></A></TD>');
95     document.write('<TD ALIGN=RIGHT><A HREF="javascript:showNextLayer()"><IMG SRC="right_arrow.gif" WIDTH=32 HEIGHT=32 ALT="forward" BORDER=0></A></TD>');
      //Because the only purpose of the back and forward buttons is to advance
  //or rewind through the image rotation, the anchors around the arrow
  //images use the HREF to call a JavaScript function rather than to assign a URL.
96     document.write('</TR>');
97     document.write('</TABLE>');
98     document.write('</DIV>');
99   }
100   //-->
101   </SCRIPT>
102    
103   </BODY>
104   </HTML>