Using Images - Slide Show

<html>
<head>
<script language=javascript>
<!-- Hide from older browsers
var slides = new Array("tropic.jpg","trin2.jpg","cabo.jpg","trin3.jpg","chess.jpg","ncal.jpg")
var thisSlide=0

 function previousSlide( ) {  
  if (document.images && thisSlide > 0) {  
       thisSlide = thisSlide -1   
       document.ocean.src=slides[thisSlide] 
       }   
     }  

 function nextSlide( ) {  
  if (document.images && thisSlide < 5) {  
       thisSlide = thisSlide +1   
       document.ocean.src=slides[thisSlide] 
       }  
     }  
  // End hiding -->
</script>
</head>
<body>
<center>
<h3><font color="#BF5500">J.B.'s Ocean Slides</font></h3>
<img src="tropic.jpg" name="ocean"><p>
<h3>
<a href =  javascript:previousSlide( ) > Previous</A>  
<a href =  javascript:nextSlide( ) > Next</A>
</h3>
</center>
</body>
</html>

 

Arrays  This script introduces a new type of variable - an array. Arrays are used for storing multiple values or objects. In this example, six image objects are loaded into an array named "slides." The first image listed in the array (tropic.jpg) can be reffered to as slides[0], the second image is slides[1], the third is slides[2], and so on.

The second variable in the Slide Show script (thisSlide) is used as an index for the slides array. The variable's initial value is set to 0, so the initial image refered to by slides[thisSlide] would be slides[0] or tropic.jpg.

Two functions are created for this script: "nextSlide( )" changes the displayed image to the next image in the array; "previousSlide( )" changes the displayed image to the previous image in the array. Both functions operate in a similar manner. The "nextSlide( )" function starts with a condition that checks to see if the browser understands image objects and also checks whether the current value of thisSlide is less than 5 (i.e. the index value of the last image). If the condition is true then "thisSlide" is increased by 1. The final statement - document.ocean.src=slides[thisSlide] - instructs the Browser to search within the document for an image named "ocean" and change the source to the new slide.

Calling a Function from a link   Rather than using "onClick" or some other event handler, both functions are called directly from the html link. The generic code for this method of calling a function is:
        <a href = javascript:myFunction( ) >nameOfLink