Have questions? Discuss this HTML tutorial with others on the forums.

You know what is awesome? Instead of showing the same boring image every time, you display a random (still possibly boring) image instead. All the cool kids are doing this. I know you want to be cool as well, and in this tutorial, I will show you how.

For an example of what I mean by displaying a random image, visit the following example that contains a picture of our cat, Merlin:

[ Merlin demands you learn how to randomly display an image ]

Each time you reload that page, you will hopefully see a randomly chosen, different picture of Merlin instead. Onwards to learning how this all works.

Overview of How this Works

Before diving into the markup and code, let me explain at a high level how this works. There are only two things you need:

1. An image (img) element in your HTML document
2. A collection of paths/URLs to images you want to display

When you want to display your random image, your JavaScript gets a reference to the HTML image element in your page. Once it has its grubby claws on it, it randomly picks an image from the collection of image paths you specified. The money shot is when the randomly chosen image is assigned to the HTML image element for loading and display.

Let's look at the implementation of all this next.

Specifying the Image Element

Somewhere in your HTML document, you will need an image element that you will want to load a random image into. If you do not have an image element, simply add one using the image tag:

<img/>

Once you have added your image tag, you'll need a way to have it be identified by JavaScript. Go ahead and give it an id value of randomImage:

<img id="randomImage"/>

You can optionally specify some other values like an initial image to show by setting the src attribute, the alt text, and so on. I won't be doing that.

The JavaScript

The last thing that remains is adding the JavaScript. You can add the following code inside script tags after your image element has been declared, or you can use an event handler to run the following code once your page's DOM has loaded:

function getRandomImage() {

var images = ['random/img.jpg', 'logo.png', 'foo.gif'];

var image = images[Math.floor(Math.random()*images.length)];

 

return image;

}

 

function displayRandomImage() {

var htmlImage = document.getElementById("randomImage");

htmlImage.src = getRandomImage();

}

displayRandomImage();

There are two changes you will need to make this code work for your particular example. First, replace the values in your images array with the path to the images you would like to use:

var images = ['random/img.jpg', 'logo.png', 'foo.gif'];

The path you specify is relative to the HTML page your script will be running in. Add as many images as you want to this array. Just be sure to separate each image path with a comma.

The second change is to make sure you are referencing your HTML image element with the id you gave it earlier:

var htmlImage = document.getElementById("randomImage");

If you were following this tutorial, your image element's id is randomImage. If you changed it, ensure your new id is referenced by the getElementById function.

Once you make these changes, you will display a random image! For reference, you can view the source for my example you saw earlier if you are having difficulties or if you are just curious.

The Code Explained

Now that you have a working example, let's just take a quick gander at why everything works the way it does.

The code contains two functions that really do all the work:

1. getRandomImage
   Returns a random image from our list of images
2. displayRandomImage
   References our image element and assigns a random image to it

The getRandomImage function looks as follows:

function getRandomImage() {

var images = ['random/img.jpg', 'logo.png', 'foo.gif'];

var image = images[Math.floor(Math.random()*images.length)];

 

return image;

}

In the first line, we have our images array. I've already spoken about it before, so let's just skip over to the next line.

The next line is where the magic happens. Here is where we pick a single image at random from our images array:

var image = images[Math.floor(Math.random()*images.length)];

Notice how the random image gets picked. As you know, to pick an item from an array, you pass it a number:

var image = images[indexNumber];

The number you pass in corresponds to an item in your array. If you aren't familiar with this, you can learn more in my Arrays tutorial.

So, we need a number to pass in to your images array. The image associated with that number gets returned. What I do is pass in a random number that goes from 0 to one less than the length of your array:

var image = images[Math.floor(Math.random()*images.length)];

This combination of array knowledge and generating random numbers kung fu gets you your random image.

Once you have your random image, stored in the appropriately named image variable, all that is left is to return that value to whatever called it:

return image;

Where does it get returned? Who calls it? Will it be my friend? All of these questions (and more!) are answered by our displayRandomImage function:

function displayRandomImage() {

var htmlImage = document.getElementById("randomImage");

htmlImage.src = getRandomImage();

}

This function has it easy. All it does is find our image element and assign its src attribute the result of calling our getRandomImage function.

The htmlImage variable stores the reference to our image element:

var htmlImage = document.getElementById("randomImage");

It does so courtesy of the getElementById function that returns a reference to the element whose id value you pass in.

Once you have your image element, all you need to do is specify an image for it to display:

htmlImage.src = getRandomImage();

To display an image inside an image element, you set the src attribute to the path of the image you wish to use. The path of the image we want to use is returned by the...getRandomImage function! By setting our src attribute to the getRandomImage function, we get a random image for our image to display. Wohoo!!!

Conclusion

Displaying a random image is one of those things that you just naturally gravitate to once you learn about arrays and random numbers. It's like...it's so obvious and so full of win. I bet this is how the person who combined chocolate and peanut butter for the first time must have felt.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇