Random Text and Image Display with JavaScript, Part 3

Here is the third and final part to my Random Text and Image Display with JavaScript Tutorial.

Displaying a random image on a web page using JavaScript involves the following steps:

• Listing the images you plan to display
• Storing the names of these images in an array
• Using the Math.random() method to obtain a random value
• Rounding the random number to an integer using Math.floor()
• Displaying the image using document.write() method

Listing the images and storing them in an array

Let’s suppose we plan to display one image from a set of 5 images, r1.gif, r2.gif, r3.gif, r4.gif and r5.gif. We create an array called img_rnd and store the image names in it.

var img_rnd = new Array ("r1.gif", "r2.gif",
"r3.gif", "r4.gif", "r5.gif");

Remember, JavaScript arrays are zero indexed (the first element of an array in JavaScript has an index of 0). The Math.random() method returns a value between 0.0 and 1.0. We have to convert this value to an integer between 0 to 4 so that it can be used as an index to retrieve the image name from the img_rnd array. We store the final value in a variable i.

Generating a random number

var i = Math.floor(4*Math.random());

The above code can be broken into two parts for easy understanding:

1. The random number thrown out by Math.random() method is multiplied by 5, which is the number of elements in our array.
2. The Math.floor() method is then used to convert the random floating point (decimal) number into an integer. Since floor() rounds a number down, we shall always get a number between 0 and 4.

Displaying the image

The final step is to display the image through document.write() method.

document.write('<img src="' + img_rnd[i] + '" width="100"
height="100" alt="Random image" />');

We now place all this code between <script>-</script> tags.

<script language="JavaScript">
<!--
var img_rnd = new Array ("r1.gif", "r2.gif",
"r3.gif", "r4.gif", "r5.gif");

var i = Math.floor(5*Math.random());

document.write('<img src="' + img_rnd[i] + '" width="100"
height="100" alt="Random image" />');

//-->
</script>

Well, I hope you have enjoyed and learned a lot from this valuable Javascript Tutorial. Just a reminder, comments are always welcome!

About the Author
Kyle Reddoch is a Web Development Expert and Internet Guru located in Amarillo, TX. To learn more about him, you can visit his website at KyleReddoch.com.