Display Random Images within Your Web Page – by William Bontrager

Note: Đang cần code để chèn ảnh random vào profile thì vớ được cái này, có điều chúng nó (wordpress) ko cho sửa <head> nên ko thực hành trong đây được… =.=

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
http://www.web-source.net/web_development/random_images.htm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: