I tried it with a table and css but i cant get it done.
I hope someone knows how to get it done???
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image slideshow</title>
<link rel="stylesheet" href="css/image-slideshow.css" type="text/css">
<script type="text/javascript" src="js/image-slideshow.js">
</script>
<script language="JavaScript" type="text/javascript">
<!--
// hieronder de namen en de url van de afbeeldingen wijzigen
var afbeeldingen=new Array()
afbeeldingen[0]=["radexpo/3groot.jpg", "radexpo/3.html"]
afbeeldingen[1]=["radexpo/4groot.jpg", "radexpo/4.html"]
afbeeldingen[2]=["radexpo/5groot.jpg", "radexpo/5.html"]
afbeeldingen[3]=["radexpo/6groot.jpg", "radexpo/6.html"]
afbeeldingen[4]=["radexpo/7groot.jpg", "radexpo/7.html"]
afbeeldingen[5]=["radexpo/8groot.jpg", "radexpo/8.html"]
afbeeldingen[6]=["radexpo/9groot.jpg", "radexpo/9.html"]
afbeeldingen[7]=["radexpo/10groot.jpg", "radexpo/10.html"]
afbeeldingen[8]=["radexpo/11groot.jpg", "radexpo/11.html"]
afbeeldingen[9]=["radexpo/12groot.jpg", "radexpo/12.html"]
afbeeldingen[10]=["radexpo/13groot.jpg", "radexpo/13.html"]
afbeeldingen[11]=["radexpo/14groot.jpg", "radexpo/14.html"]
afbeeldingen[12]=["radexpo/15groot.jpg", "radexpo/15.html"]
afbeeldingen[13]=["radexpo/16groot.jpg", "radexpo/16.html"]
afbeeldingen[14]=["radexpo/17groot.jpg", "radexpo/17.html"]
afbeeldingen[15]=["radexpo/18groot.jpg", "radexpo/18.html"]
afbeeldingen[16]=["radexpo/19groot.jpg", "radexpo/19.html"]
afbeeldingen[17]=["radexpo/20groot.jpg", "radexpo/20.html"]
afbeeldingen[18]=["radexpo/21groot.jpg", "radexpo/21.html"]
afbeeldingen[19]=["radexpo/22groot.jpg", "radexpo/22.html"]
afbeeldingen[20]=["radexpo/23groot.jpg", "radexpo/23.html"]
var voorladen="ja" // ja of nee
var optlinktarget="_blank" // hier kun je de target invullen
var beeldrandbreedte=0 // breedte rand voor plaatjes
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
// hieronder niets meer wijzigen
if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}
function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}
function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:635px;
height:441px;
z-index:0;
left: -17px;
top: 106px;
margin-left:auto;
margin-right:auto;
}
#Layer2 {
position:absolute;
width:743px;
height:107px;
z-index:0;
left: 97px;
top: 5px;
margin-left:100px;
margin-right:00px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#Layer3 {
position:absolute;
width:96px;
height:115px;
z-index:0;
left: 0px;
top: 0px;
}
body {
margin-left: 0%;
margin-top: 20%;
margin-right: 0%;
margin-bottom: 0%;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
height="100%">
<tr>
<td align="center" valign="middle"></td>
<div id="Layer2">
<div id="dhtmlgoodies_slideshow">
<div id="Layer1">
<div id="previewPane"> <A TARGET="_blank" href="radexpo/3.html"><img src="radexpo/3groot.jpg"
width="498" height="462"
align="center" border="0"></a> <span id="waitMessage"></span>
<div id="largeImageCaption"></div>
</div>
</div>
<div id="galleryContainer">
<div id="arrow_left"><A TARGET="" href="exposities.html"><img src="rad/arrow_left.gif" border="0"></a></div>
<div id="arrow_right"><img src="rad/arrow_right.gif"></div>
<div id="theImages">
<!-- Thumbnails -->
<a href="#" target="_blank" onMouseover="wijzigbeeld('previewPane', 0)"><img src="radexpo/3klein.jpg" width="133" height="100" border="0"></a>
<a href="#" target="_blank" onMouseover="wijzigbeeld('previewPane', 1)"><img src="radexpo/4klein.jpg" width="133" height="100" border="0"></a>
<a href="#" target="_blank" onMouseover="wijzigbeeld('previewPane', 2)"><img src="radexpo/5klein.jpg" width="133" height="100" border="0"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 3)"><img src="radexpo/6klein.jpg" width="133" height="100" border="0"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 4)"><img src="radexpo/7klein.jpg" width="75" height="100" border="0"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 5)"><img src="radexpo/8klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 6)"><img src="radexpo/9klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 7)"><img src="radexpo/10klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', "><img src="radexpo/11klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 9)"><img src="radexpo/12klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 10)"><img src="radexpo/13klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 11)"><img src="radexpo/14klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 12)"><img src="radexpo/15klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 13)"><img src="radexpo/16klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 14)"><img src="radexpo/17klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 15)"><img src="radexpo/18klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 16)"><img src="radexpo/19klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 17)"><img src="radexpo/20klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 18)"><img src="radexpo/21klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 19)"><img src="radexpo/22klein.jpg"></a>
<a href="#" onMouseover="wijzigbeeld('previewPane', 20)"><img src="radexpo/23klein.jpg"></a>
<!-- End thumbnails -->
<!-- Image captions -->
<div class="imageCaption">This is the caption of image number 1</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>
<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
<!-- End image captions -->
<div id="slideEnd"></div>
</div>
</div>
</div>
</div>
</body>
</html>