Sorry to have to post some long html but I'm working on Dynamic Drive's script for the above which can be found at:

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

I think I've actually done quite well and managed to sort some problems through trial and error - often the best way. However it is good to get a hint from those who know!

Using the mentioned viewer, I want to create simple tables - or something similar - which will display galleries of my artwork.
I'd like each gallery (which will all be on the same website) to be similar in look: I'd like to keep my site consistent in style and layout. If I could just get one page sorted out, the rest will follow.
Can anyone make any sense of the script below and help me in my quest? I am getting there, slowly but surely but not without the help of you good people!
Many thanks in advance.

Below is the script so far for one gallery....probably a bit of a mess!


<html>

<head>
<title>New Page 1</title>
<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["C:/mysites/portfolio/images/leopcat-b.jpg", ""]
dynimages[1]=["C:/mysites/portfolio/images/puma-b.jpg", ""]
dynimages[2]=["C:/mysites/portfolio/images/leop-b.jpg", ""]
dynimages[3]=["C:/mysites/portfolio/images/catface-b.jpg",""]
dynimages[4]=["C:/mysites/portfolio/images/cator-b.jpg",""]
dynimages[5]=["C:/mysites/portfolio/images/catpt-b.jpg",""]
dynimages[6]=["C:/mysites/portfolio/images/mog-b.jpg",""]
dynimages[7]=["C:/mysites/portfolio/images/mog2-b.jpg",""]
dynimages[8]=["C:/mysites/portfolio/images/catsketch-b.jpg",""]
dynimages[9]=["C:/mysites/portfolio/images/tigerside-b.jpg",""]
dynimages[10]=["C:/mysites/portfolio/images/ocelot-b.jpg",""]
dynimages[11]=["C:/mysites/portfolio/images/wildcat-b.jpg",""]
dynimages[12]=["C:/mysites/portfolio/images/tigjaws-b.jpg",""]
dynimages[13]=["C:/mysites/portfolio/images/tigstroll-b.jpg",""]
dynimages[14]=["C:/mysites/portfolio/images/jag-b.jpg",""]

//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progidXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>

</head>


<body>

<div align="center">
<center>

<table width="350" height="300" cellpadding="0">


<td width="30" height="276" rowspan="8">
<div align="center">
<table border="0" width="70%" cellspacing="1" cellpadding="0">
<tr>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img border="0" src="leopcat-s.jpg" width="30" height="30" style="margin-bottom: 5px" align="top"></a></td>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 8)"><img border="0" src="catsketch-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a></td>
</tr>
<tr>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img border="0" src="puma-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a></td>
<td width="50%"><a href="#" onMouseover="modifyimage('dynloadarea', 9)"><img border="0" src="tigerside-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a>
</td>
</tr>
<tr>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img border="0" src="leop-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a></td>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 10)"><img border="0" src="ocelot-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a>
</td>
</tr>
<tr>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 3)"><img border="0" src="catface-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a></td>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 11)"><img border="0" src="wildcat-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a>
</td>
</tr>
<tr>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 4)"><img border="0" src="cator-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a></td>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 12)"><img border="0" src="tigjaws-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a>
</td>
</tr>
<tr>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 5)"><img border="0" src="catpt-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a></td>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 13)"><img border="0" src="../../mysites/portfolio/images/tigstroll-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a>
</td>
</tr>
<tr>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 6)"><img border="0" src="mog-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a></td>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 14)"><img border="0" src="jag-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a></td>
</tr>
<tr>
<td width="50%">
<a href="#" onMouseover="modifyimage('dynloadarea', 7)"><img border="0" src="mog2-s.jpg" width="30" height="30" style="margin-bottom: 5px"></a></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
</div>
</td>


<td width="30" height="276" rowspan="8">
</td>


<td width="30" height="276" rowspan="8">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<p>&nbsp;</p>
</td>

<td width="30" height="376" valign="top" rowspan="8" align="center">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
<td width="257" height="376" rowspan="8"><div id="dynloadarea" style="width: 214; height: 200"></div></td>


</table>


</center>
</div>


<div id="dynloadarea" style="width: 30px; height: 30px"></div>

<div id="dynloadarea2" style="width: 300px; height: 300px"></div>
</body>

</html>