Place your message here

Your Guide to Professional
Web Site Design and Development

Web Development
HTML Codes
HTML Tips
Javascript Snippets
216 Safe Colors
Symbols
Web Directory
Web Resources
Internet Channels

Web Development: Business, Advertising, Internet Marketing, Promotion and Web Site Design

| Web Development | HTML Codes | HTML Tips | Javascript Snippets | 216 Safe Colors | Symbols | Recommendations |

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.

Back