Hvordan får jeg frem- og tilbage knapper på et html/js slideshow der virke...

Hvordan får jeg frem- og tilbage knapper på et html/js slideshow der virker med mouseover?
Se evt: http://ilovefoto.dk/Albums/JulieW/JulieW.html
Jeg vil helst kun bruge html/js og Css.
Hilsen John

<style>
img { border: 1px solid white;
}
img:hover { border: 1px solid red;
}
</style>


<table border="0" >
<tr>
<td rowspan="6" width="644" height="644" align="center"><img src="images/large/JulieW100.jpg" name="BicPic" > </td>


<script language="javascript" type="text/javascript">

var nr=100;
var t=0;
var i=0;
var z=100;


for (t=1;t<=5;t++) {
document.write('<tr>');


for (i=0;i<=2;i++) {

document.write('<td width="104" align="center"><img src="images/thumb/JulieW'+z+'.jpg" onmouseover=(document.BicPic.src="images/large/JulieW'+z+'.jpg") ></td>');

z=z+1


function NextImage() {
nr=nr+1
element=document.getElementById('BicPic')
element.src="images/large/sofie"+nr+".jpg";
}


function forrigeImage() {
MinPixNr=MinPixNr-1
if (MinPixNr==nr-1) MinPixNr=MaxPixNr
element=document.getElementById('BicPic')
element.src="images/large/sofie"+MinPixNr+".jpg";
}

}}

//document.write('<tr><td><center> <img onclick="forrigeImage()" src="images/icon/tilbageKnap.gif" width="40" height="48"> <img onclick="NextImage()" src="images/icon/NextKnap.gif" width="40" height="48"> </center></td>');
document.write('</tr></table>');


</script></tr></table>