<html>
<head>
<script type="text/javascript"><!--
var completeScroll = 5000; //milliseconds
var scrollStep = 50; //milliseconds
var direction = 'right';
var run = true;
function scrollBannerBox() {
var c = document.getElementById('bannerBox');
var d = document.getElementById('bannerInner');
if (run) {
if (direction=='right') {
d.style.left= (parseFloat(d.style.left) + ((d.children[0].clientWidth - c.offsetWidth) / (completeScroll / scrollStep))) + 'px';
if (parseInt(d.style.left) >0 ) direction='left';
} else if (direction=='left') {
d.style.left = (parseFloat(d.style.left) - ((d.children[0].clientWidth - c.offsetWidth) / (completeScroll / scrollStep))) + 'px';
if (parseInt(d.style.left) <= (-1*(d.children[0].clientWidth - c.offsetWidth))) direction='right';
}
}
setTimeout (scrollBannerBox, scrollStep);
};
function startApp() {
var c = document.getElementById('bannerBox');
var d = document.getElementById('bannerInner');
d.style.left = (-1 * (d.children[0].clientWidth - c.offsetWidth)) + 'px';
scrollBannerBox();
}
--></script>
</head>
<body onload="startApp()">
<div id="bannerBox" style="width:200px; height:50px; overflow:hidden; background:blue; padding:5px;">
<div id="bannerInner" style="position:relative;width:500px">
<table>
<tr>
<td>
<div id="banner1" class="banner">
<a href="http://bannerlinksite.com/somehref" onmouseover="run=false;" onmouseout="run=true;"><img src="/path/to/banner1.jpg" style="border:0px"></a>
</div>
</td>
<td>
<div id="banner2" class="banner">
<a href="http://bannerlinksite.com/somehref" onmouseover="run=false;" onmouseout="run=true;"><img src="/path/to/banner1.jpg" style="border:0px"></a>
</div>
</td>
<td>
<div id="banner3" class="banner">
<a href="http://bannerlinksite.com/somehref" onmouseover="run=false;" onmouseout="run=true;"><img src="/path/to/banner1.jpg" style="border:0px"></a>
</div>
</td>
<td>
<div id="banner4" class="banner">
<a href="http://bannerlinksite.com/somehref" onmouseover="run=false;" onmouseout="run=true;"><img src="/path/to/banner1.jpg" style="border:0px"></a>
</div>
</td>
<td>
<div id="banner5" class="banner">
<a href="http://bannerlinksite.com/somehref" onmouseover="run=false;" onmouseout="run=true;"><img src="/path/to/banner1.jpg" style="border:0px"></a>
</div>
</td>
<td>
<div id="banner6" class="banner">
<a href="http://bannerlinksite.com/somehref" onmouseover="run=false;" onmouseout="run=true;"><img src="/path/to/banner1.jpg" style="border:0px"></a>
</div>
</td>
<td>
<div id="banner7" class="banner">
<a href="http://bannerlinksite.com/somehref" onmouseover="run=false;" onmouseout="run=true;"><img src="/path/to/banner1.jpg" style="border:0px"></a>
</div>
</td>
<td>
<div id="banner8" class="banner">
<a href="http://bannerlinksite.com/somehref" onmouseover="run=false;" onmouseout="run=true;"><img src="/path/to/banner1.jpg" style="border:0px"></a>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
