JavaScript Demos:
Billboard of Images.

jim.cerny@unh.edu   14-AUG-1998

Discussion.

This follows Nick Heinle's billboard example as discussed in chapter 7 of his book, with the code downloaded and tweaked from the WebCoder Scriptorium.

It shows how you can put multiple images into an automatic rotation, the way click-through ads are often done on commercial Web sites. This example is easy to modify and extend for your own images. Note the following:

• Image names may be anything, but here they follow the pattern "page3x.gif".
• Corresponding URLs for each image may be anything, but here they are local files and follow the pattern "page3x.html".
• Each image should be the same size, 175h x 131w (in pixels) in this example, which required cropping in some cases.
• Image display time is controlled by "boardSpeed" which is measured in milliseconds, set here to 3000 (3 seconds).
• The script includes a test for browser version, since this uses more advanced JavaScript features.
• Image names and URL names are stored in arrays.
• The heart of the script is the function "rotateBoard".
• The function "jumpBillboard" is used to invoke the URL associated with each image. This is referenced in a hyperlink using the "javascript:" pseduo-protocol on the HREF attribute of the A tag.
• The image rotation is triggered by an "onLoad" event handler. In this example the condition is set in the BODY tag for when the page loads, but it could also be included as an attribute on the IMG tag.
• The "onLoad" event handler uses the "setTimeout" method to actually invoke the billboard rotation by specifying two arguments: the code to run, which is the "rotateBoard()" function; and the timing of the event, which is set by "boardSpeed" as described above.
• Finally, note that the loop continues as long as the page is active. This can be annoying to a viewer, depending on the context.