or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body onload="sssInit('ThumbNails','sssMainImg','*Message*');" >
<table border=1 cellspacing=1 cell padding=1 bgcolor=#FFCC66>
<tr height="20" >
<td colspan="3" align="center" style="font-Size:12px;" >
Click the Thumb Image to Enlarge<br>
Click the Large Image<br>
to View in Picture Frames
</td>
</tr>
<tr height="200" >
<td colspan="3" align="center" >
<img id="sssMainImg" src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/Initial.gif" >
</td>
</tr>
<tr>
<td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" ></td>
<td id="sssMessage" width=60 align="center" style="font-Size:12px;" > </td>
<td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" ></td>
</tr>
</table>
<table id="ThumbNails" >
<tr>
<td align="center" width="70"><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
<td align="center" width="70"><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
<td align="center" width="70"><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
</tr>
<tr>
<td align="center"><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
<td align="center" ><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
<td align="center" ><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
// Simple Slide Show sssPart1 (02-07-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// A Simple Slide Show which includes
// Display of a Large Image on Slide Show Forward or Back
// Display of a Large Image on Clicking The Thumb Nail Image
// Preloading of the Large Image before Displaying
// Directory Swapping when preloading the large image.
// The Thumb Nail and Large Image must have the same file name but different directories.
// Directory Swapping is carried outwhen preloading the large image.
// Application Notes
// The ThumbNail Images are defined in HTML Code and nested within an Element
// e.g.
//<table id="*ThumbNails*" >
// <tr>
// <td align="center" width="70"><img src="ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
// <td align="center" width="70"><img src="ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
// <td align="center" width="70"><img src="ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
// </tr>
// <tr>
// <td align="center"><img src="ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
// <td align="center" ><img src="ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
// <td align="center" ><img src="ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
// </tr>
// </table>
// where:
// *ThumbNails* = a unique id name (string)
// The Large Image is Defined in HTML Code
// e.g. <img id="*LargeImageID*" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
// where:
// *LargeImage* = a unique id name (string)
// A 'Blank' .gif is the initial image src.
// The Slide Show Controls are Defined in HTML Code
// e.g.
// <table>
// <tr>
// <td width=70 align="center" >
// <img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" >
// </td>
// <td id="*Message*" width=60 align="center" style="font-Size:12px;" ></td>
// <td width=70 align="center" >
// <img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" >
// </td>
// </tr>
// </table>
// The onclick event call functions 'sssSSBack();' and 'sssSSFwd();' control the Side Show
// A message to advise on Large Image preload statue is optional
// where:
// *Message* = a unique id name (string)
// The Script is initalised from a <BODY> on load event
// e.g. <body onload="sssInit('*ThumbNails*','*LargeImage*','*Message*');" >
// where:
// *ThumbNails* = a unique id name (string)
// *LargeImage* = a unique id name (string)
// *Message* = a unique id name (string)
// Directory Swapping
// The Thumb Nail and Large Image must have the same file name
// but different directories.
// These Directories are defined in customising variables 'sssThumbDirectory' and 'sssLargeDirectory'
// To allow a number of directory applications the directories are specified in dimensioned arrays.
// When the directory of the Thumb Nail image matches a directory in 'sssThumbDirectory'
// the location of the Large image will be the corresponding field of 'sssLargeDirectory'
// All variable, function etc. names are prefixed with 'sss' to minimise conflicts with other JavaScripts.
// The Functional Code sssPart2(less than 1.5K) is best as an Extenal JavaScript
// Tested with IE6 and Mozilla FoxFire
// Customising Variables
var sssThumbDirectory = new Array('ThumbPortrait','ThumbLandScape');
var sssMainDirectory = new Array('LargePortrait','LargeLandScape');
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Simple Slide Show sssPart2 (02-07-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// Functional Code - NO Need to change
var sssTarget,sssImg,sssMess;
var sssImgAry=new Array();
var sssImage=new Array();
var sssCnt=-1;
function sssInit(tn,li,m){
sssTarget=document.getElementById(li);
sssImg=document.getElementById(tn).getElementsByTagName('IMG');
sssMess=document.getElementById(m);
for (sss0=0;sss0<sssImg.length;sss0++){
sssImgAry[sss0]=sssImg[sss0];
sssImg[sss0].nu=sss0-1;
// sssImg[sss0].onclick=function(){ sssCnt=this.nu; sssSSFwd(); }
sssImg[sss0].onmouseover=function(){ sssCnt=this.nu; sssSSFwd(); }
}
}
function sssSSBack(){
sssCnt--;
if (sssCnt<0){ sssCnt=sssImg.length-1; }
sssLoad();
}
function sssSSFwd(){
sssCnt++;
if (sssCnt==sssImg.length){ sssCnt=0; }
sssLoad();
}
function sssLoad(){
if (sssImage[sssCnt]){
sssTarget.src=sssImage[sssCnt].src;
}
else {
if (sssMess){ sssMess.innerHTML='Please Wait'; }
sssThisImg=sssImg[sssCnt];
for (sss0=0;sss0<sssThumbDirectory.length;sss0++){
sssImg[sssCnt].src=sssImg[sssCnt].src.replace(sssThumbDirectory[sss0],sssMainDirectory[sss0]);
}
sssImage[sssCnt]=new Image();
sssImage[sssCnt].onload=function(){
if (sssMess){ sssMess.innerHTML=' '; }
sssTarget.src=sssImage[sssCnt].src;
}
sssImage[sssCnt].src=sssImg[sssCnt].src;
}
}
//-->
</script>
</body>
</html>
edited to allow mouseover and onclick operation
