Rotating Graphics

To give the impression that a web site has content that is continually changing, a simple script can be used to rotate a series of graphics on a web page. The following graphic is one of seven randomly selected pictures that will show up on this page. Reload this page to see a different graphic.

To make this rotating graphic work, I have saved seven different pictures, all with similar names.

RotatingPic0.jpg
RotatingPic1.jpg
RotatingPic2.jpg
RotatingPic3.jpg
RotatingPic4.jpg
RotatingPic5.jpg
RotatingPic6.jpg

From file to file, the only part of the name that changes is the number after the "RotatingPic" part of the name. To show a different graphic, I have a script that randomly generates a number between zero and six and inserts that number into the file name. All the pictures are 400x300 pixels. The script uses <IMG> HTML codes to display the image, just as we did in assignment #5, but part of the image file name is determined by the script.

To understand how this script works, start in the middle with the RND() command. The RND() command generates a random number between zero and one. If I put this code on the page

I will get the following random number (always between zero and one).

0.5254589

For the image rotation script to work, I need a whole number that is 0, 1, 2, 3, 4, 5 or 6. To get a number in this range, the random number is multiplied by seven

6.630147

This generates a number in the correct range, but the number includes all the decimal places. To chop off the decimals, the Integer formatting command is used

1

The INT command displays only the whole number part of the randomly generated number. This whole number is always one of the numbers needed in the rotating graphic file name.

The final step is inserting this random number into the file name. Normally, to display an image, HTML code like the following is used:

To make the graphic rotate between the seven different files, we want to dynamically insert the random number into the file name, where the "red" zero is in the above example. The first and last parts of the image file name are known. The random number must be inserted between "RotatingPic" and ".jpg". This is where the Response.Write is used. The "&" signs are used to connect "static" (the segments that do not change) parts of the file name to the randomly generated number. This creates the final script, show below:

The RANDOMIZE command is used to generate a new random number each time the page is loaded. Otherwise, the page would continually show the same random number.

The browser only sees the code that displays the graphic. See below:

Redirection