Create Random Home Page Images

Displaying random images on a home page can add real impact. It ensures that your home page is always fresh, because when a visitor returns to the home page, a new image will appear.

Here are a few examples of random images in action. When you visit the home page on these sites, keep clicking refresh and you will see that the main image changes.

There are a few different ways of achieving this. One way is to use Flash, however I have elected to use PHP because it is very easy to do and it means that real images are displayed rather than a flash movie. Flash movies can be slow to load and search engines do not like them.

The first stage is to create a random number. PHP has a ready made function for this called rand.

rand ( [int $min, int $max] )

The function rand will create a random integer (whole number) that will not be lower then $min and not higher then $max.

If we have five different images that we want to show on the home page, then we use the following code:

$rand = rand(1, 5);

This will create a random whole number that is between 1 and 5 inclusive and store it in the variable $rand. Every time the page is loaded, the function will execute again. Therefore, every time a user visits the home page, a new random number will be created.

The next stage is to output the correct image based on the random number that is stored in the variable $rand.

Once you have created the five different images that you are going to use, ftp them to the folder where you store your images for your website. I will use a folder called "images". It is important that the images are all exactly the same dimension and that you create a space for them on your page.

The HTML for the five images should be something like:

<img src="images/image1.jpg" width="760" height="300" alt="Web design and development"/>

<img src="images/image2.jpg" width="760" height="300" alt="Web design and development"/>

<img src="images/image3.jpg" width="760" height="300" alt="Web design and development"/>

<img src="images/image4.jpg" width="760" height="300" alt="Web design and development"/>

<img src="images/image5.jpg" width="760" height="300" alt="Web design and development"/>

The next stage is to write a simple PHP Switch statement to output just one image at a time. This will be based on the random number that was created. A switch statement will compare the different values of a variable and execute the relevant piece of code.

switch ($rand) {

case '1':
echo '<img src="images/image1.jpg" width="760" height="300" alt="Web design and development"/>';
break;

case '2':
echo '<img src="images/image2.jpg" width="760" height="300" alt="Web design and development"/>';
break;

case '3':
echo '<img src="images/image3.jpg" width="760" height="300" alt="Web design and development"/>';
break;

case '4':
echo '<img src="images/image4.jpg" width="760" height="300" alt="Web design and development"/>';
break;

case '5':
echo '<img src="images/image5.jpg" width="760" height="300" alt="Web design and development"/>';
break;

default:
echo '<img src="images/image1.jpg" width="760" height="300" alt="Web design and development"/>';
}

In this example, if the variable $rand has a value of 2, the switch statement will execute the following statement:

case '2':
echo '<img src="images/image2.jpg" width="760" height="300" alt="Web design and development"/>';
break;

It will, therefore, output image2.jpg. Every time the page is viewed by a user, a random number will be created and the relevant image will be displayed.

Here is the full code:

$rand = rand(1, 2);

switch ($rand) {
case '1':
echo '<img src="images/image1.jpg" width="760" height="300" alt="Web design and development"/>';
break;

case '2':
echo '<img src="images/image2.jpg" width="760" height="300" alt="Web design and development"/>';
break;

case '3':
echo '<img src="images/image3.jpg" width="760" height="300" alt="Web design and development"/>';
break;

case '4':
echo '<img src="images/image4.jpg" width="760" height="300" alt="Web design and development"/>';
break;

case '5':
echo '<img src="images/image5.jpg" width="760" height="300" alt="Web design and development"/>';
break;

default:
echo '<img src="images/image1.jpg" width="760" height="300" alt="Web design and development"/>';
}

Comments

Nice post as it's a good feature to use.

I might be tempted to just approach it this way though.


$rand = rand(1, 5);
echo "<img src=\"images/image$rand.jpg\">";

Blair Wadman's picture

Yes, your approach is a lot simpler. I used my approach because I like to give my images a descriptive name for the SEO benefit and I can name my images anything using the technique outlined.

However, if one is happy with image names like image1, image2, then I would use your approach.

Hi!
I've copied and pasted what you provided above, thanks!

The code almost works great, except all of the images appear simultaneously with no rotation effect. Any suggestions?

Thanks again.

Blair Wadman's picture

Hi David,

That would suggest that the switch statement is executing every case. It should not the continue to the next case after the relevant case is run with the "break". The break should stop the code from running to the next case after it is executed.

Hmmm, that is strange. Can you just check to make sure that you have the opening and closing php tags in place?

Add new comment