Slide Show - Javascripts - HPi

images: Slide Show

[Javascript]

The images below are generated by a Javascript within this Web document. The script controls the images to be displayed, their order, and how long they will stay on-screen.

Slide Show

The Code:

The <head> Tag:
Copy the following code and paste it within the <head></head> tags of your document. You must then type in the names of your own graphics following the pattern established in the example.

<script language="JavaScript" type="text/javascript">

// Change delay time in seconds 
var timeDelay = 5;

// Enter in each image to be displayed in the slide show here. 
// Note the last image is NOT followed by a comma. 
var Pix = new Array
("01.jpg",
 "02.jpg",
 "03.jpg",
 "04.jpg" 
);

// LEAVE THE REST OF THIS ALONE 
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//-->
</script>

The <body> Tag
Insert the following into the opening <body> tag: onLoad="startPix()" so that you have this:

<body onLoad="startPix()">

Place the Image
Insert the first image of the slide show into your document. Include the name= attribute with the value of ChangingPix. Make sure you use the capital C and P.

<img name="ChangingPix" src="01.jpg" width="120" height="90" alt="Slide Show">

Images to Work With

This should be a fairly simple Javascript to implement. Just make sure of a few things:

Place all of the graphics within the same directory as the Web page that contains the script.
Be sure that you have made the necessary, and correct, changes to the script.

If either of these are not done correctly, the script will not function.

Return to Images menu.