Javascript Marquee

<table width="847" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="148" align="center" valign="top" style="background-image:url(images/bant.gif)">
   <div id="demo" style="OVERFLOW: hidden; WIDTH: 843px; COLOR: #ffffff; HEIGHT: 142px">
        <table width="342" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td id="demo1" valign="top">
     <table border="0" cellpadding="7" cellspacing="1">
                  <tr>
                    <td><img src="images/gd/g1.gif" width="100" height="137" border="0" /></td>
                    <td><img src="images/gd/g2.gif" width="100" height="137" border="0" /></td>
                    <td><img src="images/gd/g3.gif" width="100" height="137" border="0" /></td>
                    <td><img src="images/gd/g4.gif" width="100" height="137" border="0" /></td>
                    <td><img src="images/gd/g5.gif" width="100" height="140" border="0" /></td>
                    <td><img src="images/gd/g6.gif" width="100" height="140" border="0" /></td>
                    <td><img src="images/gd/g7.gif" width="100" height="140" border="0" /></td>
                    <td><img src="images/gd/g8.gif" width="100" height="140" border="0" /></td>
                  </tr>
              </table>
     </td>
              <td id="demo2" valign="top">&nbsp;</td>
            </tr>
        </table>
      </div>
   </td>
    </tr>
</table>
<script>
 var speed=20
 demo2.innerHTML=demo1.innerHTML
 function Marquee(){
  if(demo2.offsetWidth-demo.scrollLeft<=0)
   demo.scrollLeft-=demo1.offsetWidth
  else{
   demo.scrollLeft++
  }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>