Save at least ten (10) full size photos to your disk, the photos all need to be about same the same width and can be in either landscape mode (300w x 200h) or in portrait mode (300w x 450h) pixels. Each photo should be no more than 10 kbyes in jpg format. Make a simple Slide Show using Java Script and Style to create a DHTML file that shows these ten (10) photos as the main feature within a table that is 50 pixels larger than the images.
- Make a headline that says My Family Photo Album for the slide show and under each photo add a description of the photo that changes dynamically with the photos.
- Create the page using the Java Script function window.setTimeout("yourfunction()", 1333); where yourfunction() will cause the photos to be changed along with the photo's text using the document.getElementById("aname") the 1333 is the number of milli-seconds the photo is displayed. The sample JavaScript is listed below.
<script type]="text/javascript" language]="JavaScript"> <-- var imagearray = new Array(); imagearray[0] = "images/yourimage1.jpg"; imagearray[1] = "images/yourimage2.gif"; var textarray = new Array(); textarray[0]="Your text one goes here"; textarray[1]="Your text two goes here"; var preloadFlag = false; function preloadImages() { if (document.images) { over0 = new Image(); for( i=1; i < ((imagearray.length-1)); i++) { over0.src = imagearray[i]; } window.setTimeout("updateTime()", 2000); preloadFlag = true; } } function updateTime() { if (preloadFlag) { i=i+1; if (i > imagearray.length-1) { i=0; } document.getElementById("myimage").src = ""+imagearray[i]+""; document.getElementById("mytext").innerHTML = textarray[i]; } window.setTimeout("updateTime()", 1333); } var i=0; --> </script> - See sample, this is what your page should be similar to.
- Make an external Style sheet .css file that has the background color, the Table with a border of 15 pixels, border style of ridge and all of the text that is used on your pages defined by the style sheet.
- In the external Style sheet .css file make your IMG style to be border of 0px and border style of none.
- You have now created your first Java Script photo album Slide Show for your web site.
- Upload your new pages along with your photos to your web space.

