 Display Random Images within Your Web Page
By
William
Bontrager
Here is a really easy way
to have random images for a page. Here are the four steps.
Step 1. Make your images.
When you make your images, they must all be of the same type, like .gif or
.jpg
The image file names must all be the same except for an embedded sequential
number. Examples:
logo1.jpg
logo2.jpg
logo3.jpg
It doesn't matter how many images you will be using so long as the naming
is consistent and the numbers are sequential.
When your images are ready, upload them into a directory on your server.
Step 2. Determine the image tag.
Determine what your image tag would be if you were putting the image directly
onto your page. You'll use this tag in the JavaScript function in the next
step.
Here is an example image tag:
<img src="logo2.jpg">
If all of your images will have the same height and width, you might also
include those in the image tag:
<img src="logo2.jpg" height="150" width="200">
Step 3. Create the JavaScript function.
Put this JavaScript into the HEAD area of your web page, like:
<HTML>
<HEAD>
<script type="text/javascript" language="JavaScript">
<!-- Copyright 2002 Bontrager Connection, LLC
//
// Type the number of images you are rotating.
NumberOfImagesToRotate = 3;
// Specify the first and last part of the image tag.
FirstPart = '<img src="logo';
LastPart = '.jpg" height="150" width="200">';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</script>
</HEAD>
<BODY...
On the line with NumberOfImagesToRotate, replace the number 3 with the number
of images you are rotating.
Now, use the last example in the previous step and separate the image tag
into two parts. The first part will be the tag up to the sequential number.
The last part will be everything following the sequential number. The number
itself will not be represented in either the first or last part.
Between the apostrophes following "FirstPart =" and "LastPart =", put the
first and last part of your image tag.
That's all you need to do with the JavaScript function. When called, the
function will determine a random number from 1 to the NumberOfImagesToRotate.
It will then construct the image tag by placing the random number between
the FirstPart and LastPart. Last, it will print the constructed image tag
with the built-in document.write() function.
Step 4. Insert the random image.
Where you want the random image to appear on your web page, put:
<script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>
That's all there's to it.
The demonstration page at
http://willmaster.com/a/14/pl.pl?art141
contains three images for random insertion.
With only three images, there is a 1 in 3 chance that the same image will
display when you reload the page. The more images you have for the randomizer
to choose from, the less often the same image will display more than once
in a row.
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee. |
|
Web
Development
