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.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.var img_rnd = new Array ("r1.gif", "r2.gif", "r3.gif", "r4.gif", "r5.gif");
Generating a random number
The above code can be broken into two parts for easy understanding:var i = Math.floor(4*Math.random());
- The random number thrown out by Math.random() method is multiplied by 5, which is the number of elements in our array.
- 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.We now place all this code between <script>-</script> tags.document.write('<img src="' + img_rnd[i] + '" width="100" height="100" alt="Random image" />');
Well, I hope you have enjoyed and learned a lot from this valuable Javascript Tutorial. Just a reminder, comments are always welcome!<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>
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.
