Hoi Frits,
Het script is nogal opgehangen aan die options-elementen; als je die gaat verwijderen, werkt het niet meer.
Dus: een ander makkelijk script. :d
Bijvoorbeeld:
[JS]var img = new Array(); // array's nummeren altijd vanaf nul i.p.v. een!
img[0] = 'http://www.hondagoldwings.com/voetbal/voetbal1.jpg';
img[1] = 'http://www.hondagoldwings.com/voetbal/voetbal2.jpg';
img[2] = 'http://www.hondagoldwings.com/voetbal/voetbal3.jpg';
// enz.
// hieronder niets meer doen
var stand = 0; // eerste afbeelding wordt getoond bij opening pagina
var aantal = img.length;
function nextImage(){
var wissel = document.getElementById('wissel');
if (stand < aantal-1){
stand = stand + 1;
}
else {
stand = 0;
}
wissel.src = img[stand];
}
function prevImage(){
var wissel = document.getElementById('wissel');
if (stand > 0){
stand = stand - 1;
}
else {
stand = aantal - 1;
}
wissel.src = img[stand];
}
[/JS]
Verder is de html gebakken met FrontPage, die is erg verouderd en leverde ook vroeger al slechte code af.
De plaatsing van de elementen is met tabellen gedaan, ook al verouderd.
Dat leverde als broncode voor de <body>:
HTML:
<body bgproperties="fixed" background="background.png" bgcolor="#FFFFFF" topmargin="50">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="912" bgcolor="#FFFFFF" height="289">
<tr>
<td height="1" width="32" rowspan="2"> </td>
<td height="1" width="880" colspan="2"> </td>
</tr>
<tr>
<td height="275" width="824" valign="top">
<table align="center" border="0">
<tr>
<td colspan="3" align="center"><img name="mainimage" border="0" src="voetbal1.jpg" width="500" height="281" alt="test"></td>
</tr>
<tr>
<td align="left"><input type="button" value="<< vorige" onClick="javascript:prevImage()" style="font-family: Tahoma; color: #164516"></td>
<td align="center">
<select id="optionlist" onChange="javascript:changeImage()" size="1" style="font-family: Tahoma; color: #164516">
<option value="voetbal1.jpg">foto 1</option>
<option value="voetbal2.jpg">foto 2</option>
<option value="voetbal3.jpg">foto 3</option>
</select>
</td>
<td align="right"><input type="button" value="volgende >>" onClick="javascript:nextImage()" style="color: #164516; font-family: Tahoma"></td>
</tr>
</table>
<p>
</td>
</center>
<td height="275" width="54" valign="middle">
</td>
</tr>
<center>
</table>
</center>
</div>
</body>
</html>
Dat is niet zo'n beste beurt,
zegt de html-validator 
(terwijl toch heel toegeeflijk getest is op het Transitional Doctype, dat voor oude codes van vóór 1999 bedoeld was).
Maar wat dacht je van dit:
HTML:
<body>
<div id="kader">
<img id="wissel" width="500" height="300" alt=""
src="http://www.hondagoldwings.com/voetbal/voetbal1.jpg" ><!-- de eerste -->
<div id="knoppen">
<input id="terug" type="button" value="<< vorige" onclick="prevImage()">
<input id="heen" type="button" value="volgende >>" onclick="nextImage()">
</div>
</div>
</body>
</html>
Hieruit is alle opmaak verwijderd, zodat de pure html overblijft.
De opmaak kan mooi met css geregeld worden, dat wordt dan ook overzichtelijk:
Code:
<style type="text/css">
html {
height: 100%;
padding-bottom: 1px;
background: #FFFFFF url(http://www.hondagoldwings.com/voetbal/background.png) fixed;
color: #000000;
}
body {
width: 912px;
margin: 0 auto;
padding: 0;
font-size: 100.1%;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
}
#kader {
margin-top: 50px;
padding: 20px 0;
text-align: center;
background: #FFFFFF;
}
#knoppen {
width: 500px;
margin: 10px auto 0 auto;
overflow: hidden;
}
#terug {
float: left;
cursor: pointer;
}
#heen {
float: right;
cursor: pointer;
}
</style>
En alles tezamen is dit het resultaat:
Tenslotte: als betere html-editor is de gratis
KompoZer aan te raden, die bakt wel goede html.
Met vriendelijke groet,
CSShunter
__________
PS: O ja, ik heb ook nog deze alternatieven in de aanbieding:
