Click here again and again
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |
You can use these links to scroll to individual topics
Code in the <head> section
The Manual Slide Show
A variation
For this manual slide show, we're going to use a new function: nextImg(). We also need preloadImg() for preloading the images. preloadImg() is the same function that we've been using, but the calls look just a little bit different. That's because we're putting the image objects into an array.
Besides preloading the images, we need a variable to keep track of which image is currently displayed. I have two slide shows on this page, so I need one of these variables for each of the slide shows.
<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
}
//=======================================================
// nextImg() - Advance to next image
//
// Arguments:
// 1. The image name (from img tag)
// 2. Array of image objects
// 3. The index of the image that's currently displayed
// Returns:
// Updated index of current image
// Author: Larry Coats
//=======================================================
function nextImg (zsImg, zoArr, ziIndex)
{
// Prevent alerts in Netscape 2 and IE 3
if (!document.images) return;
// Choose next image - Return to 1st if necessary
if (++ziIndex >= zoArr.length) ziIndex = 0;
// Display next image
eval ("document." + zsImg + ".src = zoArr[ziIndex].src");
// Return next index
return ziIndex;
}
//=======================================================
// Global variables for keeping track of current images
//=======================================================
var giIndex1 = 0; // Current image of 1st slide show
var giIndex2 = 0; // Current image of 2nd slide show
//=======================================================
// Preload slide show images
//=======================================================
var gmPlane = new Array();
gmPlane[0] = preloadImg ("plane1.jpg");
gmPlane[1] = preloadImg ("plane2.jpg");
gmPlane[2] = preloadImg ("plane3.jpg");
gmPlane[3] = preloadImg ("plane4.jpg");
gmPlane[4] = preloadImg ("plane5.jpg");
gmPlane[5] = preloadImg ("plane6.jpg");
</script>
This slide show consists of six images. The URLs of the six images are in the gmPlane array that's created in the preload code shown above. The slide show begins with the first of the six images, which is also specified in the <img> tag. The variable giIndex1 contains a value that ranges from 0 through 5, and keeps track of which of the six images is currently displayed.
To advance to the next image, click on either the image or the text link below it. You will normally use one or the other of these methods - I've included both to demonstrate that it can be done either way.
<a href="#"
onclick="giIndex1=nextImg('imShow1',gmPlane,giIndex1); return false;">
<img src="plane1.jpg" width="185" height="185"
border="0" id="imShow1" name="imShow1"
alt="Slide show" /></a>
<br /><br />
<a href="#"
onclick="giIndex1=nextImg('imShow1',gmPlane,giIndex1); return false;">
Click here again and again</a>
Notice that you put single quotes around the first argument to nextImg(), but you do NOT put quotes around the others! This is important, and the script won't work if you don't do this as shown here.
Remember that you have the options of using onclick, onmouseover, onmouseout, onMouseDown and/or onMouseUp (the last two are not implemented in Netscape 3 or Opera). This variation uses onmouseover and onmouseout instead of onclick.
<a href="#" onclick="return false;"
onmouseover="giIndex2 = nextImg ('imShow2', gmPlane, giIndex2);"
onmouseout="giIndex2 = nextImg ('imShow2', gmPlane, giIndex2);">
<img src="plane1.jpg" width="185" height="185"
border="0" id="imShow2" name="imShow2" alt="Slide show" /></a>
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |