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.

  1. 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.
  2. 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>
    
  3. See sample, this is what your page should be similar to.
  4. 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.
  5. In the external Style sheet .css file make your IMG style to be border of 0px and border style of none.
  6. You have now created your first Java Script photo album Slide Show for your web site.
  7. Upload your new pages along with your photos to your web space.