Loading a Random Image
by
kirupa : 12 June 2004
Are you interested in introducing some randomness to your
web pages? Of course you are! One such way is by loading a
random image. If you have a site containing a splash image, you
may want to consider displaying a different image each time
a visitor visits your site. You can accomplish that by
loading a random image using PHP.
The following is an image that
is displayed randomly. Reload this page to see another
random image (unless the same random number occurs again):
");
?>
[ a random image is displayed each time
you reload this page ]
Let's get right to the code. The code that is responsible
for displaying the above random effect is:
<?php
$file_array = array
('http://www.kirupa.com/me/footer/footer_home.gif',
'http://www.kirupa.com/me/footer/footer_mit.gif',
'http://www.kirupa.com/me/footer/footer_music.gif',
'http://www.kirupa.com/me/footer/footer_music2.gif',
'http://www.kirupa.com/me/footer/footer_tv.gif',
'http://www.kirupa.com/me/footer/footer_orange.gif',
'http://www.kirupa.com/me/footer/footer_game.gif');
$total
= count($file_array);
$random
= (mt_rand()%$total);
$file
=
"$file_array[$random]";
print("<img src=$file></a>");
?>
If you want to use this effect on your
site, simply copy and paste the above PHP code into a PHP
page. Change the addresses in the array
$file_array
with the path to your images. You can add more image paths,
remove image paths, etc. and the code will take your changes
into account. Neat!
Code Explanation
In the following sections I will explain the code and why it
works the way it does.
$file_array
= array
('http://www.kirupa.com/me/footer/footer_home.gif',
'http://www.kirupa.com/me/footer/footer_mit.gif',
'http://www.kirupa.com/me/footer/footer_music.gif',
'http://www.kirupa.com/me/footer/footer_music2.gif',
'http://www.kirupa.com/me/footer/footer_tv.gif',
'http://www.kirupa.com/me/footer/footer_orange.gif',
'http://www.kirupa.com/me/footer/footer_game.gif');
Don't let the length of the above section of code scare you.
It is simply an array of items, with each item referencing
the path of an image file. The array's name is
$file_array. A simplified
way of looking at the above section is:
- $file_array
= array('address1',
'address2',
address3');
The abbreviated form above is the basic structure of the
array. For aesthetic purposes, I arranged the array items vertically as
opposed to the more traditional, horizontal format. I can do
that because PHP does not differentiate between spacing. You
can arrange items in whichever way that works for you.
- $total
= count($file_array);
The variable
$total
receives the results of the
count()
function. The
count()
function is an effective way of finding out how many items are
stored in your array -
$file_array.
- $random
= (mt_rand()%$total);
In this line, I specify a random number
depending on the number of items contained in the array.
$random receives the values of the
mt_rand()%$total
expression.
If
you recall, the value for
$total
is equivalent to the number of items in your array.
Multiplying the total number of items by the
mt_rand()
function yields a random number.
The value of
$random
will go between a number that is 0 and
$total-1.
In our code, using 7 items, you will receive a random number
between 0 and 6. That suits our situation well as you will
see in the next section.
- $file
=
"$file_array[$random]";
In
this line, we retrieve the value of the item from an array
and equate it to the
$file
variable. Remember, in an array, the first item starts with
an index number of 0 and increases incrementally until you
reach your last item which will have an index number of
$total-1.
In other words, if your array has 7 items, your array will
number the first item at 0 and the final item at 6.
Since
our random number will also go from zero to
$total-1, this
line of code works out well for us!
print("<img
src=$file></a>");
In
this line we are outputting our results to the browser. You
are printing the HTML code that will be responsible for
displaying the image, and the path of the image is
represented by
$file.
Quick Recap
First, the array containing the location of
your movie clip is initialized. A variable then retrieves
the total number of items contained in that array. Once that
number has been determined, that number is used to determine
a random number. The random number goes from 0 and one less
than the total number of items in the array. If your array
had 7 items, your random number goes from 0 to 6.
Once the random number has been
determined, we retrieve the appropriate value from the array
using that random number. That value you retrieve from the
array is the address of your image file, for that is what
our array contains. Once you have your image file location,
you can output the HTML code for displaying an image file
including the location you determined.
I hope the information helped.
If you have any questions or comments, please don't hesitate to post them on the
Forums. Just post your question and I, or our friendly
forum helpers, will help answer it.
Also, if you are interested in helping out the kirupa.com site, click
here to find out how.
Cheers!
|