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>..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.