Browser compatible Javascript slide show

The code described on this page is a complete example of layer swapping to create a slide show using the methods as described elsewhere on this site. Click here for a detailed description of the principles involved.

The idea is to display a number of images at random. The images may have different widths and heights and you may include an href link with each so that when someone clicks on a link it takes them to another page.

The script operates with all modern browsers, Internet Explorer, Firefox and Opera.

• In the body of the web page, create a layer identified with an id as box0 :

  <div id="box0"
  style="position:absolute; left:592px; top:111px; width:168px; height:272px; z-index:4; border: 1px none #000000;">
  </div>
  
  

• Modify the style to set the size and position on your web page as required.

• Place the Javascript include file underneath the layer.

• Modify the configuration parameters within the Javascript as follows :

  timesetup - enter the length of time you wish the image to be displayed for in milliseconds
  images - enter the number of images in the Array size
  enter each image identified as images[0], images[1], images[2] etc
  

  Each image is entered in the form :

  images[0] = "<a href=\"http://www.yourwebsite.com/default.htm/\"><img src=\"http://www.yourwebsite.com/graphics/image.gif\" alt=\"Click here to go to page\" border=\"0\" width=\"168\" height=\"243\"></a>";
  
  

  Note that you must put a backslash character before quote marks.

A complete example of this is available for downloading by clicking here.