JavaScript rotating pictures and scrolling box

Hello,
My rotating images on the right (written in javascript) stopped working after I added the newsletter box (also written in javascript) on the left.  
 
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
     <title>Untitled</title>
</head>
<basefont face = "arial">
<body onLoad = "movePictures()">
<table width = "100%" bgcolor = "ecedb3" border = "1" cellpadding="2"
cellspacing="0">
     <tr>
          <td valign = "abstop">
               <table width = "170" border = "1" cellpadding="0"
cellspacing="0">
                    <tr><td bgcolor = "black"><font color = "white" size =
"-1">Newsletters</font></td></tr>
                    <tr><td>
                    <script language="javascript">
                    var scrollerwidth="170"
                    var scrollerheight="450"
                    var scrollerspeed="1";
                    var scrollercontent="<font size='-1'>Lots of scrolling
content here...</font>"


                   
                    var pauseit=1
                   
                    scrollerspeed=(document.all)? scrollerspeed :
Math.max(1, scrollerspeed-1) //slow speed down by 1 for NS
                    var copyspeed=scrollerspeed
                    var iedom=document.all||document.getElementById
                    var actualheight=''
                    var cross_scroller, ns_scroller
                    var pausespeed=(pauseit==0)? copyspeed: 0

                    function populate(){
                    if (iedom){
                    cross_scroller=document.getElementById?
document.getElementById("iescroller") : document.all.iescroller
                    cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
                    cross_scroller.innerHTML=scrollercontent
                    actualheight=cross_scroller.offsetHeight
                    }
                    else if (document.layers){
                    ns_scroller=document.ns_scroller.document.ns_scroller2
                    ns_scroller.top=parseInt(scrollerheight)+8
                    ns_scroller.document.write(scrollercontent)
                    ns_scroller.document.close()
                    actualheight=ns_scroller.document.height
                    }
                    lefttime=setInterval("scrollscroller()",20)
                    }
                    window.onload=populate

                    function scrollscroller(){

                    if (iedom){
                    if
(parseInt(cross_scroller.style.top)>(actualheight*(-1)+8))
 
cross_scroller.style.top=parseInt(cross_scroller.style.top)-copyspeed+"px"
                    else
                    cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
                    }
                    else if (document.layers){
                    if (ns_scroller.top>(actualheight*(-1)+8))
                    ns_scroller.top-=copyspeed
                    else
                    ns_scroller.top=parseInt(scrollerheight)+8
                    }
                    }

                    if (iedom||document.layers){
                    with (document){
                    if (iedom){
                    write('<div
style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';o
verflow:hidden" onMouseover="copyspeed=pausespeed"
onMouseout="copyspeed=scrollerspeed">')
                    write('<div id="iescroller"
style="position:absolute;left:0px;top:0px;width:100%;">')
                    write('</div></div>')
                    }
                    else if (document.layers){
                    write('<ilayer width='+scrollerwidth+'
height='+scrollerheight+' name="ns_scroller">')
                    write('<layer name="ns_scroller2"
width='+scrollerwidth+' height='+scrollerheight+' left=0 top=0
onMouseover="copyspeed=pausespeed"
onMouseout="copyspeed=scrollerspeed"></layer>')
                    write('</ilayer>')
                    }
                    }
                    }
                    </script>

                    </td></tr>          
               </table>
          </td>
         
          .
          .
          .
         
          <td valign = "abstop">
          <table width = "225" border = "1" cellpadding="0" cellspacing="0">
                    <tr><td>
                    <script language = "javascript">
                    var banner = new Array("images/network_web.gif",
"images/ugs_web.gif", "images/nlos-c_web.gif", "images/nlos-ls_web.gif" );
                    var imgIndex = -1;
                    function movePictures() {
                    imgIndex ++;
                    if (imgIndex > banner.length - 1) {
                    imgIndex = 0;
                    }
                    window.document.images[0].src = banner[imgIndex];
                    setTimeout("movePictures();", 2000);
                    }
                    </script>          
                    <img src = "images/network_web.gif"><br>
                    </td></tr>
          </table>
          </td>
     </tr>
</table>
</body>
</html>
yenmeiAsked:
Who is Participating?
 
StormyWatersConnect With a Mentor Commented:
remove this line:
window.onload=populate

and change this line:
<body onLoad = "movePictures()">

to this:
<body onLoad = "movePictures();populate()">
0
 
StormyWatersCommented:
The problem was the onload events conflicting.
0
 
dakydCommented:
You're overwriting the onload handler, so that movePictures() is never called.  Remove this line:
                    window.onload=populate

and then change the body tag to this:
<body onLoad="movePictures(); populate();">

That should guarantee you call both functions, and should get you back on track.  Hope that helps.

0
 
dakydCommented:
Sorry Stormy, I had a stale window.  Didn't mean to re-post.
0
All Courses

From novice to tech pro — start learning today.