Previous Tutorial:Image Slide
Show
Next Tutorial: New Image Everytime You Visit
the Page
The file which does all the work in this slide show is slide-showNavigator.htm. To move pages around, we must first catch our pages ... and in this case we catch them in an array. We use two arrays: One to hold the URLs and another to hold the descriptions of the pages (which show in the boxes below).
The code holding the filenames is:
var URLList = new Array(){ URLList[0]= 'slideshow0.htm'URLList[1]= 'slideshow1.htm'URLList[2]= 'slideshow2.htm'URLList[3]= 'slideshow3.htm'URLList[4]= 'slideshow4.htm'} |
And the list containing the text descriptions is as follows.
var URLText=new Array(){ URLText[0]= 'Frames Code'URLText[1]= 'The data in Arrays'URLText[2]= 'Forwards Code'URLText[3]= 'Backwards Code'URLText[4]= 'Automatic Code'} |
So we have caught our data in ARRAYs and now we can work on it with the script. But first let us look at the HTML code for the navigator file. The important thing here is the names of the text boxes and the checkbox, which we will use in the code.
< form name="form1" id="form1" action="">< table border="0" width="95%">< tr>< td width="150">< input type="button" value="Back to >>" onclick="retrace()" />< /td><!-- The above button calls the function retrace() which we will use to move backwards in the sequence. The next button calls the function showPage() which we use to move forwards in the sequence--> < td width="150">< input type="button" value="Forward to >>" onclick="showPage()" />< /td>< td width="150">Check the box for automatic mode < /td>< /tr>< tr>< td valign="top" width="150">< input type="text" name="textPrevious" id="textPrevious" value="Previous Article" size="29" />< /td><!-- The text boxes, textPrevious and textNext hold the descriptions of the URLs of the pages before and after in the sequence. They have default values which we change when we start moving the pages. --> < td valign="top" align="left" width="150">< input type="text" name="textNext" value="Next Article" size="32" />< /td><!-- Finally, we have the checkbox below which we use to make the pages move automatically or to stop them moving. Clicking this box calls the function automatically() which moves the pages automatically through the sequence. --> < td width="150">< input type="checkbox" onclick="automatically()" name="automatic" id="automatic" size="25" maxlength="25" value="ON" />< br />< /td>< /tr>< /table>< /form> |
As we have not put CHECKED in the code for the checkbox, it if off by default. So it starts off unchecked and you have to click on the buttons to move through the slide show.
| [If you need to learn more about HTML visit the HTML Tutorial] |