JavaScript: Random Images

Location: Tutorials > JavaScript > Here
Written By: Site Admin
Date: 14 Jul 2005
Level: 2 (Novice)

A simple tutorial that explains how to make a random image show up when the page is loaded. See right for a demo. Note that JavaScript must be enabled. If you wish to use a PHP version, read the tutorial for the PHP version.

This code can be put anywhere in the <body> of a page depending on where you want the random image to be shown.

<script language="javascript" type="text/javascript">
<!--

// the number in the brackets below is the number of images to be used

var images = new Array(4)

// this is the list of images that will be used in the random selection
// use this form: images[x] = 'pathtoimage.gif';
// note the first element must have the number 0

images[0] = '/images/imageone.gif';
images[1] = '../imagetwo.gif';
images[2] = 'images/imagethree.jpg';
images[3] = 'http://example.com/picture.gif';

// get a random number between 0 and 3 (get used to counting from 0 when programming)

var rand = Math.floor(Math.random() * images.length);

// get the image URL corresponding to the random number

var image = images[rand];

// "write" the HTML code for the image to the document

document.write('<img src="' + image + '" alt="Random Image" />');

//-->
</script>

Most of that should be understandable. If you are new to JavaScript and want to start learning, read Starting with JavaScript.

Random Image

Here is a variation that changes the image every 10 seconds. The demo on the right changes every second. Please note that on the demo here, the images are preloaded so that they can appear quicker. If they are not preloaded, the images will have to load after the change image function is executed meaning that the user will see a blank image for awhile. View our tutorial, Preload images for instructions on how to do this.

<!-- this is the image that is modified by the change_image() function. It is important that you leave id="random_image" as that is how the JavaScript idenitifies the image -->
<img src="firstimage.gif" alt="Random Image" id="random_image" class="border" />

<script language="javascript" type="text/javascript">
<!--

// the number in the brackets below is the number of images to be used

var images = new Array(4)

// this is the list of images that will be used in the random selection
// use this form: images[x] = 'pathtoimage.gif';
// note the first element must have the number 0

images[0] = '/images/imageone.gif';
images[1] = '../imagetwo.gif';
images[2] = 'images/imagethree.jpg';
images[3] = 'http://example.com/picture.gif';

// call the function to change image when the page loads

window.onload = function(){ change_image(); }

// the function which changes the image

function change_image(){

// get a random number between 0 and 3 (get used to counting from 0 when programming)

var rand = Math.floor(Math.random() * images.length);

// get the image URL corresponding to the random number

var image = images[rand];

// get the image object model - cross browser compatible

var ele = document.getElementById ? document.getElementById('random_image') : document.all['random_image'];

// modify the image source

ele.src = image;

// change the image again after 10000 milliseconds (1000 milliseconds = 1 second)

setTimeout('change_image()',10000);

} // end of function

//-->
</script>

Feel free to experiment with the script, try adding support for more data, eg. a separate "alt" text for each image. If you want some hints as to how to do this, have a look at the variation of the PHP random images script. How about modifying it so that the same image doesn't show up twice in succession?