• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 3. The Interactive Slideshow > The Syntax Breakdown

3.2. The Syntax Breakdown

The script is included in one file, index.html. You'll find it in your zip file at ch03/index.html. Example 3.1 has the code.

Example 3.1. index.html

     1  <HTML>
     2  <HEAD>
     3  <TITLE>The Slideshow</TITLE>
     4  
     5  <STYLE TYPE="text/css">
     6  #menuConstraint { height: 800; }
     7  </STYLE>
     8  
     9  <SCRIPT LANGUAGE="JavaScript1.2">
    10  <!--
    11  var dWidLyr  = 450;
    12  var dHgtLyr   = 450;
    13  var curSlide  = 0;
    14  var zIdx          = -1;
    15  var isVis        = false;
    16  
    17  var NN      = (document.layers ? true : false);
    18  var sWidPos  = ((NN ? innerWidth  : screen.availWidth)  / 2) - 
    19    (dWidLyr / 2);
    20  var sHgtPos  = ((NN ? innerHeight : screen.availHeight) / 2) - 
    21    (dHgtLyr / 2);
    22  var hideName = (NN ? 'hide' : 'hidden');
    23  var showName = (NN ? 'show' : 'visible');
    24  
    25  var img = new Array();
    26  var imgOut = new Array();
    27  var imgOver = new Array();
    28  var imgPath = 'images/';
    29  
    30  var showSpeed = 3500;
    31  var tourOn = false;
    32  
    33  function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy) {
    34    if (NN) {
    35      document.writeln('<LAYER NAME="' + sName + '" LEFT=' + sLeft + 
    36        ' TOP=' + sTop + ' WIDTH=' + sWdh + ' HEIGHT=' + sHgt + 
    37        ' VISIBILITY="' + sVis + '"' + ' Z-INDEX=' + (++zIdx)  + '>' + 
    38        copy + '</LAYER>');
    39      }
    40    else {
    41      document.writeln('<DIV ID="' + sName + 
    42        '" STYLE="position:absolute; overflow:none;left:' + sLeft + 
    43        'px; top:' + sTop + 'px; width:' + sWdh + 'px; height:' + sHgt + 
    44        'px;' + ' visibility:' + sVis + '; z-Index=' + (++zIdx) + '">' + 
    45        copy + '</DIV>');
    46      }
    47    }
    48  
    49  function slide(imgStr, scientific, copy) {
    50    this.name    = imgStr;
    51    imagePreLoad(imgStr);
    52    this.copy    = copy;
    53    this.structure = 
    54      '<TABLE WIDTH=500 CELLPADDING=10><TR><TD WIDTH=60% VALIGN=TOP>' + 
    55      '<IMG SRC=' + imgPath + imgStr + '.gif></TD>' + 
    56      '<TD WIDTH=40% VALIGN=TOP><H2>Common Name:</H2><H2><I>' + 
    57      camelCap(imgStr) + '</I></H2><H3>Scientific Name: </H3><H3><I>' + 
    58      scientific + '</I></H3>' + '<B>Abstract:</B><BR>' + copy + 
    59      '</TD></TR></TABLE>';
    60  
    61    return this;
    62    }
    63  
    64  function imagePreLoad(imgStr) {
    65    img[img.length]  = new Image();
    66    img[img.length - 1].src = imgPath + imgStr + '.gif';
    67  
    68    imgOut[imgOut.length] = new Image();
    69    imgOut[imgOut.length - 1].src = imgPath + imgStr + 'out.gif';
    70  
    71    imgOver[imgOver.length] = new Image();
    72    imgOver[imgOver.length - 1].src = imgPath + imgStr + 'over.gif';
    73    }
    74  
    75  var slideShow  = new Array(
    76    new slide('bird', 'Bomb-zis Car-zes', 'This winged creature has been 
    77       known to seek out and soil freshly-washed vehicles.'),
    78    new slide('walrus', 'Verius Clueless', 'These big fellas good fishers, 
    79       but toothbrushing is another story.'), 
    80    new slide('gator', 'Couldbeus Luggajus', 'These reptiles often play 
    81       mascots for large college sporting events.'), 
    82    new slide('dog', 'Makus Messus', 'Man\'s best friend? Yeah, right. 
    83       No wonder these mammals get a bad rep.'), 
    84    new slide('pig', 'Oinkus Lotsus', 'Humans with questionable eating 
    85       habits are often compared to these farm creatures.'), 
    86    new slide('snake', 'Groovius Dudis', 'Slick and sly with a 
    87       watchful eye.'),
    88    new slide('reindeer', 'Redius Nosius', 'Though co-workers used to 
    89       laugh and call him names, he eventually won the respect of the entire 
    90       team.'),
    91    new slide('turkey', 'Goosius Is Cooktis', 'Celebrated and revered for 
    92       an entire year, then served as dinner shortly after.'),
    93    new slide('cow', 'Gotius Milkus', 'This animal is considered a moover 
    94       and shaker, and tends to milk things for all they\'re worth. Udderly 
    95       shameful.'),
    96    new slide('crane', 'Whooping It Upus', 'Not to be confused with a 
    97       piece of heavy construction equipment. Rumored as the source of the 
    98       nickname <I>birdlegs</I>.')
    99    );
   100  
   101  function camelCap(str) {
   102    return str.substring(0, 1).toUpperCase() + str.substring(1);
   103    }
   104  
   105  function genScreen() {
   106    var menuStr = '';
   107    for (var i = 0; i < slideShow.length; i++) {
   108      genLayer('slide' + i, sWidPos, sHgtPos, dWidLyr, dHgtLyr, 
   109        (i == 0 ? true : false), slideShow[i].structure);
   110      menuStr += '<A HREF="" onMouseOver="hideStatus(); if(!tourOn) 
   111        { setSlide(' + i + ');' + 
   112        ' imageSwap(\'' + slideShow[i].name + '\', ' + i + ', true)}; 
   113             return true;"' + 
   114        ' onMouseOut="if(!tourOn) { setSlide(' + i + ');' + 
   115        ' imageSwap(\'' + slideShow[i].name + '\', ' + i + ', false)}; 
   116             return true;"' + 
   117        ' onClick="return false;"><IMG NAME="' + slideShow[i].name + 
   118        '" SRC="' + imgPath + slideShow[i].name + 
   119             'out.gif" BORDER=0></A><BR>'; 
   120      }
   121  
   122    genLayer('automation', sWidPos - 100, 11, 100, 200, true, 
   123      '<A HREF="javascript: autoPilot();"  onMouseOver="hideStatus(); 
   124           return true;">' + 
   125      '<IMG SRC="' + imgPath + 'automate.gif" BORDER=0></A>'
   126      );
   127  
   128    genLayer('guide', sWidPos - 100, 30, 100, 200, true, 
   129      '<A HREF="javascript: if(!tourOn) { changeSlide(-1); }" 
   130           onMouseOver="hideStatus(); return true;">' + 
   131      '<IMG SRC="' + imgPath + 'leftout.gif" BORDER=0></A>' + 
   132      '<A HREF="javascript: if(!tourOn) { menuManager(); }" 
   133           onMouseOver="hideStatus(); return true;">' + 
   134      '<IMG SRC="' + imgPath + 'guideout.gif" BORDER=0></A>' + 
   135      '<A HREF="javascript: if(!tourOn) { changeSlide(1); }" 
   136           onMouseOver="hideStatus(); return true;">' + 
   137      '<IMG SRC="' + imgPath + 'rightout.gif" BORDER=0></A>'
   138      );
   139  
   140    genLayer('menu', sWidPos - 104, 43, 100, 200, false, 
   141      '<DIV ID="menuConstraint"><TABLE><TD>' + 
   142           menuStr + '</TD></TABLE></DIV>'
   143      );
   144    }
   145  
   146  function refSlide(name) {
   147    if (NN) { return document.layers[name]; }
   148    else { return eval('document.all.' + name + '.style'); }
   149    }
   150  
   151  function hideSlide(name) {
   152    refSlide(name).visibility = hideName;
   153    }
   154  
   155  function showSlide(name) {
   156    refSlide(name).visibility = showName;
   157    }
   158  
   159  function menuManager() {
   160    if (isVis) { hideSlide('menu'); }
   161    else { showSlide('menu'); }
   162    isVis = !isVis;
   163    }
   164  
   165  function changeSlide(offset) {
   166    hideSlide('slide' + curSlide);
   167    curSlide = (curSlide + offset < 0 ? slideShow.length - 1 : 
   168      (curSlide + offset == slideShow.length ? 0 : curSlide + offset));
   169    showSlide('slide' + curSlide);
   170    }
   171  
   172  function setSlide(ref) {
   173    if (tourOn) { return; }
   174    hideSlide('slide' + curSlide);
   175    curSlide = ref;
   176    showSlide('slide' + curSlide);
   177    }
   178  
   179  function imageSwap(imagePrefix, imageIndex, isOver) {
   180    if (isOver) { document[imagePrefix].src = imgOver[imageIndex].src; }
   181    else { document[imagePrefix].src = imgOut[imageIndex].src; }
   182    }
   183  
   184  function hideStatus() { window.status = ''; }
   185  
   186  function autoPilot() {
   187    if (tourOn) { 
   188      clearInterval(auto); 
   189      imageSwap(slideShow[curSlide].name, curSlide, false);
   190      }
   191    else {
   192      auto = setInterval('automate()', showSpeed);
   193      imageSwap(slideShow[curSlide].name, curSlide, true);    
   194      showSlide('menu');
   195      visible = true;
   196      }
   197    tourOn = !tourOn;
   198    }
   199  
   200  function automate() {
   201    imageSwap(slideShow[curSlide].name, curSlide, false);
   202    changeSlide(1);
   203    imageSwap(slideShow[curSlide].name, curSlide, true);
   204    }
   205  
   206  //-->
   207  </SCRIPT>
   208  </HEAD>
   209  <BODY BGCOLOR=WHITE>
   210  <CENTER>
   211  <FONT FACE=Arial>
   212  <H2>Animal Kingdom Slideshow</H2>
   213  </FONT>
   214  </CENTER>
   215  <SCRIPT LANGUAGE="JavaScript1.2">
   216  <!--
   217  genScreen();
   218  //-->
   219  </SCRIPT>
   220  </FONT>
   221  </BODY>
   222  </HTML>

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint