DOM, next/prev image

[Mindreaver]

Ik wil op mijn site een soort image viewer, waar als ik op een pijtje druk de volgende/vorige (of een random) afbeelding geladen wordt. Er is mij verteld dat ik dat het beste met DOM te doen (getElementById ofzo).
Aangezien ik vandaag voor het eerst van dat woord hoor, heb ik geen flauw idee wat ik moet doen.

Dit is m'n huidige code die omgebouwd moet worden:

        	<!-- Teaser -->
        	<div id="teaser">
            
            	<img src="./images/teaser1.jpg" alt="" />
           		<a href="#" id="arrow_left"></a><a href="#" id="arrow_right"></a>
            	<div id="overlay">
                
                	<p>Tekst passend bij afbeelding (bij elke afbeelding dus verschillend)</p>
  
                </div>
            
            </div>

Ik heb intussen een paar uur zitten googlen, maar ik kom er niet uit.
Kan iemand mij uit de brand helpen?

 

[NielsDesmet]

Dit zou moeten lukken:

<center>
<div id='Teaser'>
<img src='images/teaser1.jpg'>
</div>
<br>
<input type='button' value='Vorige' onclick='PrevImage()'>
<input type='button' value='Random' onclick='RandImage()'>
<input type='button' value='Volgende' onclick='NextImage()'>
<script language='Javascript' type='text/javascript'>
<!--
var CurrentImage = 1;
var TotalImages = ?; //Vervang de '?' door het aantal afbeeldingen voor je deze code gebruikt!

function NextImage()
{
if(CurrentImage == TotalImages)
{
CurrentImage = 1;
}
else
{
CurrentImage += 1;
}
document.getElementById('Teaser').innerHTML = "<img src='images/teaser"+CurrentImage+".jpg'>";
}

function RandImage()
{
CurrentImage = Math.ceil(Math.random()*TotalImages);
document.getElementById('Teaser').innerHTML = "<img src='images/teaser"+CurrentImage+".jpg'>";
}

function PrevImage()
{
if(CurrentImage == 1)
{
CurrentImage = TotalImages;
}
else
{
CurrentImage -= 1;
}
document.getElementById('Teaser').innerHTML = "<img src='images/teaser"+CurrentImage+".jpg'>";
}
//-->
</script> 
</center>

En als je wilt dat hij zegt aan welke afbeelding je zit kan je ook dit gebruiken:

<center>
<script language="JavaScript" type="text/javascript">
<!--
var CurrentImage = 1;
var TotalImages = ?; //Vervang de '?' door het aantal afbeeldingen voor je deze code gebruikt!
//-->
</script>

<div id='Teaser'>
Afbeelding <script language="JavaScript" type="text/javascript">
<!--
document.write(CurrentImage);
//-->
</script>
 van <script language="JavaScript" type="text/javascript">
<!--
document.write(TotalImages);
//-->
</script>.
<br>
<img src='images/teaser1.jpg'>
</div>
<br>
<input type='button' value='Vorige' onclick='PrevImage()'>
<input type='button' value='Random' onclick='RandImage()'>
<input type='button' value='Volgende' onclick='NextImage()'>

<script language='Javascript' type='text/javascript'>
<!--
function NextImage()
{
if(CurrentImage == TotalImages)
{
CurrentImage = 1;
}
else
{
CurrentImage += 1;
}
document.getElementById('Teaser').innerHTML = "Afbeelding "+CurrentImage+" van "+TotalImages+".<br><img src='images/teaser"+CurrentImage+".jpg'>";
}

function RandImage()
{
CurrentImage = Math.ceil(Math.random()*TotalImages);
document.getElementById('Teaser').innerHTML = "Afbeelding "+CurrentImage+" van "+TotalImages+".<br><img src='images/teaser"+CurrentImage+".jpg'>";
}

function PrevImage()
{
if(CurrentImage == 1)
{
CurrentImage = TotalImages;
}
else
{
CurrentImage -= 1;
}
document.getElementById('Teaser').innerHTML = "Afbeelding "+CurrentImage+" van "+TotalImages+".<br><img src='images/teaser"+CurrentImage+".jpg'>";
}
//-->
</script>
<center>

Vergeet niet om het vraagteken bij TotalImages aan te passen!!

 

[Mindreaver]

Bedankt Niels!

gedeeltelijk opgelost. mss heb ik zo een andere vraag