 <STYLE type=text/css>.slides { 
	POSITION: absolute; TOP: 120px; VISIBILITY: hidden 
} 
</STYLE> 
 
<SCRIPT language=JavaScript1.2> 
<!-- 
 
var currentSlide = 1; 
 
var numSlides = 5; 
var captions = new Array(5); 
 
function setUpCaptions(){	 
captions[1] = "This is a picture of the Taj Mahal, in Agra, India";	 
captions[2] = "Here is a photograph of St. Mark's Cathedral, Venice, Italy";	 
captions[3] = "An evocative shot of Stonehenge, Salisbury Plain, England";	 
captions[4] = "The famous Leaning Tower of Pisa, Italy";	 
captions[5] = "The Statue of Liberty, New York, USA" 
}; 
 
function Is (){   // convert all characters to lowercase to simplify testing  
     
var agt=navigator.userAgent.toLowerCase() 
 
    // *** BROWSER VERSION ***  
     
this.major = parseInt(navigator.appVersion);    
this.nav  = ((agt.indexOf('mozilla')!=-1) && ((agt.indexOf('spoofer')==-1) 
                 
&& (agt.indexOf('compatible') == -1)));     
this.nav4 = (this.nav && (this.major == 4));    
this.nav4up = this.nav && (this.major >= 4);     
this.ie   = (agt.indexOf("msie") != -1);  
this.ie4  = (this.ie && (this.major == 4));     
this.ie4up  = this.ie  && (this.major >= 4);} 
 
 
var is = new Is(); 
 
 
 
function setUp() 
{ 
	 
Is(); 
	 
setUpCaptions(); 
	 
if (is.nav4up) { 
		 
	 
document.layers["captions"].document.forCaptions.captionsText.value=captions[1]; 
	} 
	 
else {document.all["captions"].document.forCaptions.captionsText.value=captions[1];} 
} 
 
function showNextSlide(){	 
var oldSlide = "image"+currentSlide;	 
if (currentSlide == numSlides){		 
currentSlide = 1;}	else{		 
currentSlide++;}	 
var nameofSlide = "image"+currentSlide; 
	 
switchSlides(nameofSlide, oldSlide,currentSlide); 
} 
 
function showPreviousSlide(){	 
var oldSlide = "image"+currentSlide;	 
if (currentSlide == 1){		 
currentSlide = numSlides;}	 
else		{currentSlide--;}		 
var nameofSlide = "image"+currentSlide;	 
switchSlides(nameofSlide, oldSlide,currentSlide);} 
 
function switchSlides(newSlide, oldSlide, slideNumber) 
{ 
	 
if (is.nav4up) { 
		 
document.layers[newSlide].visibility="show"; 
		 
document.layers[oldSlide].visibility="hide"; 
		 
document.layers["captions"].document.forCaptions.captionsText.value=captions[slideNumber]; 
		 
	} 
	 
else { 
		 
document.all[newSlide].style.visibility="visible"; 
		 
document.all[oldSlide].style.visibility="hidden"; 
		 
document.all["captions"].document.forCaptions.captionsText.value=captions[slideNumber]; 
	} 
} 
 
 
//-->  
</SCRIPT>  
 
 
<BODY onload=setUp()> 
<H1>Another DHTML Slideshow</H1></CENTER> 
<DIV class=slides id=image1 style="VISIBILITY: visible"> 
<IMG alt="The Taj Mahal" border=0 height=160 src="tajmahal.jpe" width=240></DIV> 
<DIV class=slides id=image2> 
<IMG alt="St Marks Cathedral" border=0 height=160 src="stmarks.jpe" width=240></DIV> 
<DIV class=slides id=image3> 
<IMG alt=Stonehenge border=0 height=160 src="stonehenge.jpe" width=240></DIV> 
<DIV class=slides id=image4> 
<IMG alt="The Leaning Tower of Pisa" border=0 height=160  src="ltower.jpe" width=240></DIV> 
<DIV class=slides id=image5> 
<IMG alt="The Statue of Liberty" border=0 height=160 src="liberty.jpe" width=240></DIV> 
<TABLE border=0 cellPadding=5 cellSpacing=5 style="LEFT: 30px; POSITION: absolute; TOP: 320px"> 
  <TBODY> 
  <TR> 
<TD> 
 
<A href="javascript:showPreviousSlide()" name=10 onmouseout="document.images[5].src='prevslide.gif';self.status='';return true;"  onmouseover="document.images[5].src='prevslidedown.gif';self.status='Previous Slide';return true"> 
<IMG alt="Previous Slide" border=0 height=25 name=10 src="prevslide.gif" width=92> 
</a></TD> 
     
<TD> 
<A href="javascript:showNextSlide()" name=11  
onmouseout="document.images[6].src='nextslide.gif';self.status='';return true;"  
onmouseover="document.images[6].src='nextslidedown.gif';self.status='Next Slide';return  
true"> 
<IMG alt="Next Slide" border=0 height=25 name=11 src="nextslide.gif"  
width=96></A></TD></TR></TBODY></TABLE> 
<DIV id=captions style="LEFT: 320px; POSITION: absolute; TOP: 130px"><B>Picture  
Caption</B> 
<FORM name=forCaptions><TEXTAREA name=captionsText onfocus=javascript:blur()  
rows=5 wrap=virtual></TEXTAREA></FORM></DIV> 
<DIV id=footer+text style="LEFT: 10px; POSITION: absolute; TOP: 370px"><LAYER  
top="370" left="10" name="footer+text"> 
<HR width="50%"> 
 
<P>Here's a very nice slideshow that works equally well for Internet Explorer  
4.x and later and Netscape 4.x and later. The buttons that appear to depress on  
mouseover are of course optional; you could use ordinary static buttons, form  
buttons, or a text link.</P> 