In the HTML below there are scrolling images and texts from right to left. Is starts when the HTML opens. I would like to change the HTML so that there is no scrolling when the page opens, and use some kind of anchors so that the user can scroll the content one image further, or 2 images further or 1 image backwards. Could someone help me with this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<link href="http://www.inspiration-company.nl/layout2.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
<!--
var w=235;
var h=295;
var l=screen.width-(w+15);
var features='left='+l+',top=0,width='+w+',height='+h+',resizable=yes';

function pop(url) {
window.open(url,'',features);
}
//-->
</script>

<style type="text/css">
/*<![CDATA[*/

body {
background: #ffffff;

}
#middle {
position:absolute;
left: 0px;
top: 95px;
width: 3050px;
height: 350px;
overflow: hidden;
}
#container {
width: 5788px; /*total images width */
display: none;
position: absolute;
top: 0px;
border: solid 0px #6699cc;



.images {
float:left;
border:none;
}


/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

//* preload rollover
var roll = new Image()
roll.src = 'spiraalmetman3opt.jpg'

var x = 550;
var w = 5788; /*total images width */
var i = 0;
var speed = 12;

/*-----------------------------------------------------------------------------
Scroller functions
-----------------------------------------------------------------------------*/

function imageScroll() {
var Scontainer = document.getElementById("container").style;
Scontainer.display = "block";
Scontainer.left = (x - i) + "px";
i++;
if (i == 5300) location = 'overzicht-trainingen-workshops-events.html'
if(i >(x + w)) {
i = 0;
}
scroller=setTimeout("imageScroll()",speed);
}
onload = imageScroll;

function stopScroll(el) {
clearTimeout(scroller);
}

/*-----------------------------------------------------------------------------
Image swap

- No 2nd arg = "swap back"
-----------------------------------------------------------------------------*/

function swap(img,src)
{
if(src){
img.oSrc = img.src;
img.src = src;
}
else
img.src = img.oSrc;
}

/*-----------------------------------------------------------------------------
Mouse events
-----------------------------------------------------------------------------*/

function img_mouseover(img, src)
{
stopScroll();
swap(img,src);
img.onmouseout = img_mouseout;
}

function img_mouseout()
{
imageScroll();
swap(this);
}

//]]>
</script>



</head>

<body>
<div id ="middle">
<div id = "container">

<table>
<tr>
<td><div class="kop"><img border="0" src = "dotwhite.gif" height="0" width="32">
<a href="" id="idwzw" class="kop" target="_self" onmouseover = "stopScroll(this); return false;" onmouseout = "img_mouseout()" alt = ""/>Wie zijn wij?</a>
<img border="0" src = "http://www.inspiration-company.nl/dotwhite.gif" height="0" width="88">
<a href="" id="idinspi" class="kop" target="_self" onmouseover = "stopScroll(this); return false;" onmouseout = "img_mouseout()" alt = ""/>Inspiratie Trainingen</a>
<img border="0" src = "http://www.inspiration-company.nl/dotwhite.gif" height="0" width="83">
<a href="" id="idteamb" class="kop" target="_self" onmouseover = "stopScroll(this); return false;" onmouseout = "img_mouseout()" alt = ""/>Teambuilding</a>
<img border="0" src = "http://www.inspiration-company.nl/dotwhite.gif" height="0" width="83">
<a href="" id="idteamb" class="kop" target="_self" onmouseover = "stopScroll(this); return false;" onmouseout = "img_mouseout()" alt = ""/>Teambuilding</a>

</div>
</td>
</tr>
<tr>
<td>
<a href="" target="_self"><img class = "images" border="0" src = "http://www.inspiration-company.nl/intromanopschommelopt.jpg" onmouseover = "stopScroll(this);return false;" onmouseout = "img_mouseout()" alt = ""/></a>
<img class = "images" border="0" src = "http://www.inspiration-company.nl/dotwhite.gif" height="0" width="40" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/>
<a href="" target="_self"><img class = "images" border="0" src = "http://www.inspiration-company.nl/introgatinluchtopt.jpg" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/></a>
<img class = "images" border="0" src = "http://www.inspiration-company.nl/dotwhite.gif" height="0" width="40" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/>
<a href="" target="_self"><img class = "images" border="0" src = "http://www.inspiration-company.nl/introvogelsincirkelopt.jpg" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/></a>
<img class = "images" border="0" src = "http://www.inspiration-company.nl/dotwhite.gif" height="0" width="40" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/>
<a href="" target="_self"><img class = "images" border="0" src = "http://www.inspiration-company.nl/intromanopschommelopt.jpg" onmouseover = "stopScroll(this);return false;" onmouseout = "img_mouseout()" alt = ""/></a>
<img class = "images" border="0" src = "http://www.inspiration-company.nl/dotwhite.gif" height="0" width="40" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

</div>
</div>

<div id = "links">
<a href="#" onclick="">Link1: scroll 1 image to the right</a><br>
<a href="#" onclick="">Link2: scroll 2 images to the right</a><br>
<a href="#" onclick="">Link3: scroll 1 images to the left</a><br>
<a href="#" onclick="">Link4: scroll 2 images to the left</a><br>
</div>

</body>
</html>