Web Face for Netscape Communicator - Features: Moving Backgrounds

W	e	b	F	a	c	e
	E	f	f	e	c	t	s

Moving Backgrounds

Moving backgrounds are created by using a layer of images that is moved behind the rest of the web page using JavaScript code. The background layer is a table of images that covers the entire web page. This layer needs to be one image longer than what is displayed so as the background layer is moved, more background comes in. The background is moved using the setTimeout function of JavaScript allowing the browser time to react to other events like mouse clicks.

Source Code

// ============================

// GLOBAL VARIABLES

// ============================

background_timer = 0;          // Timer ID used to stop background moving

//    using clearTimeout()

background_left = 0;           // Left positioning of the background

background_offset = 0;         // Offset from left position

background_width = 105;	       // Width of background image

// ============================

// movebackground

// ============================

function movebackground(width)

{

// Move background until we've moved one entire background image

// over, then reset our offset and begin again

if (background_offset < width)

{

document.layers['background'].left = background_left - background_offset;

// Background gets moved 2 pixels each time

background_offset = background_offset + 2;

}

else

background_offset = 0;

// Set timer to movebackground again in 150 ms

background_timer = setTimeout("movebackground('"+background_width+"');", '150');

}

</SCRIPT>

<!--

BACKGROUND LAYER:

The width of the table must be equal to the number of

images across times the width of the image.  The number

of images is determined by taking the width of the window,

dividing by the width of the background image, rounding up

to the nearest integer and adding one. (i.e.: one more image

than is needed to cover the window width-wise).

Z-index insures the layer is the bottommost.

-->

</TABLE>

</LAYER>