How to make a web page picture change with time

Web pages use JavaScript code to make various things happen at set time intervals. This is Client Side code, and therefore takes place within the Web browser, executing as the visitor is viewing and interacting with your page. Changing images makes the experience of viewing a Web page more dynamic, and it is an effect that is easy to implement and requires only a small amount of JavaScript code in order to function.

Prepare your pictures. Make sure your Web images are cropped to the correct size, preferably all the same size so that they can be effectively displayed in your Web pages without upsetting the other content. Try to minimise the file sizes, keeping them as small as possible while making sure they're still good quality. Give your images names that reflect some numerical sequence (for example, "pic1.jpg" then "pic2.jpg") so that the only identifying feature is the number.

Create your Web page using HTML structures. Use the following outline, changing the image file name to suit your own:

In this case, the images must be in the same directory as the Web page. The structure initially holds the first image to be displayed.

Add JavaScript code to keep time. Insert the following in your page head section:

Change the "totPics" number to suit however many images you have.

Set the page up to start the timer. Add to your page body element as follows:

This makes the timer start when the page is loaded. After five seconds the picture is changed to the next in the sequence and the timer starts keeping count again. The sequence number is started at 1 and incremented every time the timer runs out, so that the picture changes its source attribute to the next in the sequence. Alternatively name your images whatever you like and store their file names in an array, looping through this instead of using a sequence number.

Listen for user interaction with your Web page. Depending on the purpose of your page, you may want to alter the way it functions as the user interacts with it. For example, to stop the image from changing while the user has her mouse hovered over it, add the following to your image code:

Add to the JavaScript:

function stop Timer()

{ clear Timeout(keepTime); }

function start Timer()

{ keepTime=setTimeout("changePic()", 5000); }