Displaying the Background

This is how our animation is implemented. In the background, we display a cloudy sky image that takes up the whole page width. By superimposing a GIF image, we can hide the background, unveiling only part of it with the transparent areas of our GIF: the letters of our title. The idea is then to make the background scroll under our transparent GIF image to produce an animation effect. To do this, we must first display it on the appropriate layer:

82: contentbg="<table cellpadding=0 cellspacing=0 border=0><tr>"
83: contentbg+="<td><img src='"+bgimage+"' border='0' width='"+bgdivwidth+"' height='"+messageboardheight+"'></td>"
84: contentbg+="<td><img src='"+bgimage+"' border='0' width='"+bgdivwidth+"' height='"+messageboardheight+"'></td>"
85: contentbg+="<td><img src='"+bgimage+"' border='0' width='"+bgdivwidth+"' height='"+messageboardheight+"'></td>"
86: contentbg+="</tr></table>"
87:
88:     if (document.all) {
89: bgdiv.innerHTML=contentbg
90: text.innerHTML="<img src='"+messageboard[0]+"' border='0' width='"+messageboardwidth+"' height='"+messageboardheight+"'>"

[...]

98: if (document.layers) {
99: document.bgdiv.document.write(contentbg)

Our background image is repeated three times by means of a table. This is sufficient to allow us to obtain a background that is wide enough to exceed the page width and to animate it in loops without any problem. To do this, we use a contentbg variable that will be assigned the HTML code for the table (lines 82-86).

This code now needs to be integrated into the page. This is done on lines 88-106, depending on which browser the visitor is using (lines 88-94 for Internet Explorer and lines 99-106 for Netscape Navigator).

Once the images are displayed, we start scrolling the background, using the movebackground() function.