Scrolling the Background Image

Scrolling the background image boils down to scrolling its layer. We just need to regularly change the bgdiv layer's coordinates to produce our effect. This is the job of the movebackground() function:

124: function movebackground() {
125: if (document.all) {
126:     if (document.all.bgdiv.style.posLeft >=(-bgdivwidth+messageboardwidth+bgdivleft+step)) {   
127:         clipleft+=step
128:         clipright=clipleft+messageboardwidth
129:         clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
130: document.all.bgdiv.style.clip=clippoints
131:         document.all.bgdiv.style.posLeft-=step
132:         timer= setTimeout("movebackground()",pause)
133:     }
134:     else {
135:         clearTimeout(timer)
136:         i_messageboard++
137:         if (i_messageboard>=messageboard.length) {i_messageboard=0}
138:         text.innerHTML="<img src='"+messageboard[i_messageboard]+"' border=0>"
139:         restart()
140:     }
141: }

Again, we use the clipping technique to make only part of the layer visible. This is necessary to display only one of the three copies of the background. The scrolling method used is then simple: we scroll the bgdiv layer to the left (lines 131 and 150) and change the clipping window's coordinates to move it to the right (lines 127-130 or 144-149, depending on the browser).