| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |
You can use these links to scroll to individual topics
Code in the <head> section
The <body> tag
The slide show
For this slide show, we're adding several controls to let the visitor interact with the slide show and to display a caption for the images.
<script language="javascript" type="text/javascript"> <!--
//====================================================
// preloadImg() - Preloads an image
//
// Argument: String containing URL of image to preload
// Returns: Image object created for the image
// Author: Larry Coats
//====================================================
function preloadImg (zsUrl)
{
// Prevent alerts in IE 3 and Netscape 2
if (!document.images) return null;
// Create an image object and preload the image
var xo = new Image(); // Create the image object
xo.src = zsUrl; // Set URL - Preloads
return xo; // Return the image object
}
//====================================================
// allLoaded() - Called from onload to initialize the
// slide show
//====================================================
function allLoaded ()
{
gbLoaded = true; // Page has finished loading
document.fmShow.onoff.value = "Start slide show";
document.fmShow.faster.value = "Faster";
document.fmShow.caption.value = gsDescr[0];
document.fmShow.delay.value = "" + (giDelay / 1000);
}
//====================================================
// startIt() - Called when user clicks start/stop
//====================================================
function startIt ()
{
// Slide show won't work in Netscape 2 or IE 3
if (!document.images) {
alert ("Sorry, your browser doesn't support this slide show.");
return;
}
// Can't start slide show until page is fully loaded
if (!gbLoaded) {
alert ("Try again after the page has fully loaded.");
return;
}
// If the slide show is running, stop it
if (gbRunning) {
gbRunning = false;
document.fmShow.onoff.value = "Start slide show";
}
// Otherwise, start it
else {
gbRunning = true;
document.fmShow.onoff.value = "Stop slide show";
gTimeId = setTimeout ("changeIt();", 0);
}
}
//====================================================
// goFaster() - Speed up the slide show
//====================================================
function goFaster ()
{
// If currently more than 1 second delay, reduce
// by 1 second. Otherwise reduce by .1 second.
// Don't let it go smaller than .1 second.
if (giDelay > 1000) giDelay -= 1000;
else giDelay -= 100;
if (giDelay < 100) giDelay = 100;
if (giDelay == 100) document.fmShow.faster.value = "";
document.fmShow.delay.value = "" + (giDelay / 1000.0);
}
//====================================================
// goSlower() - Slow down the slide show
//====================================================
function goSlower ()
{
// If current delay is less than 1 second, add
// .1 second. Otherwise, add 1 second
if (giDelay < 1000) giDelay += 100;
else giDelay += 1000;
document.fmShow.fastervalue = "Faster";
document.fmShow.delay.value = "" + (giDelay / 1000.0);
}
//====================================================
// changeIt() - Display next image
//====================================================
function changeIt ()
{
if (gbRunning) {
if (++giIndex >= gmArr.length) giIndex = 0;
document.imShow.src = gmArr[giIndex].src;
document.fmShow.caption.value = gsDescr[giIndex];
gTimeId = setTimeout ("changeIt();", giDelay);
}
}
//====================================================
// Global variables for slide show
//====================================================
var giIndex = 0; // Image currently displayed
var gbLoaded = false; // true when page is loaded
var gbRunning = false; // true if Slide show is running
var gTimeId = 0; // Timer ID
var giDelay = 3000; // Delay, 1/1000's of secs
//====================================================
// Define captions
//====================================================
var gsDescr = new Array();
gsDescr[0] = "Original image";
gsDescr[1] = "FF gallery T: Enhanced equalizer";
gsDescr[2] = "FF gallery T: Sparkle";
gsDescr[3] = "FF gallery S: Color Metalizer";
gsDescr[4] = "FF gallery S: Emboss Graver";
gsDescr[5] = "FF gallery S: Gravitational Lenser";
gsDescr[6] = "FF gallery U: Don't Drive Drunk";
gsDescr[7] = "FF gallery U: Forbidden Island";
gsDescr[8] = "Andrews 20: My Brother is Bigger Than Yours";
//====================================================
// Preload slide show images
//====================================================
var gmArr = new Array();
gmArr[0] = preloadImg ("sea.jpg");
gmArr[1] = preloadImg ("sea01.jpg");
gmArr[2] = preloadImg ("sea02.jpg");
gmArr[3] = preloadImg ("sea03.jpg");
gmArr[4] = preloadImg ("sea04.jpg");
gmArr[5] = preloadImg ("sea05.jpg");
gmArr[6] = preloadImg ("sea06.jpg");
gmArr[7] = preloadImg ("sea07.jpg");
gmArr[8] = preloadImg ("sea08.jpg");
//--> </script>
You need an onload in the <body> tag. onload calls allLoaded(), which initializes the slide show so that the visitor can start it when he's ready.
<body ... onload="allLoaded();">
For this slide show, we're adding a <form> tag and several form-based gadgets that let the user interact with the slide show and to show a caption for the images.
<form action="#" id="fmShow" name="fmShow">
<center>
<!-- The slide show image -->
<img src="sea.jpg" width="320" height="240"
alt="Slide show" hspace="5" align="left"
id="imShow" name="imShow" />
<!-- The start/stop button -->
<input type="button" name="onoff"
value="Loading slide show" onclick="startIt();" />
<br /><br />
<!-- The "go faster" button -->
<input type="button" name="faster"
value="Faster" onclick="goFaster();">
<br /><br />
<!-- The "go slower" button -->
<input type="button" name="slower"
value="Slower" onclick="goSlower();" />
<br /><br />
<!-- Text box for displaying delay -->
Delay:
<input type="text" size="2" name="delay" value="" />
seconds
<!-- Text box for displaying captions -->
<br clear="all" /><br />
<input type="text" size="50" name="caption"
value="" />
</center>
</form>
If your captions are too long to fit in a one-line text box, you can use a <textarea> instead.
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |