Random backgrounds and images

A simple image replacement technique using PHP

Tested with Internet Explorer 6, Firefox 1.0PR, Netscape 7.0 (Gecko/20020823), Mozilla 1.7.2 (Gecko/20040803) and Opera 7.54, running under Windows XP.

This example is based on the PHP script developed by Matt Mullenweg, "Random Image Rotator", available at "Photo Matt".

To see how the images change randomly every time the page is loaded, just hit "refresh" or "reload" in your browser.

To implement follow the steps below:

1. Make a folder just for the random images to be displayed, for instance "random_images";
2. Copy the script [1] below to a file named, for instance, "rotate.php", located inside the above folder;
3. Upload the images to the folder defined above;
4. Add to the element' selector the following declaration:
   • background-image: url(random_images/rotate.php);

In this page you can see four examples of this technique:

1. The above header, <div id="header">: the images are contained inside a folder named "rotate_header" containing its own "rotate.php" file. The div style follows:

   #header {
   width: 99%;
   border: 1px dashed black;
   height: 100px;
   background-color: #FFFFFF;
   background-image: url(rotate-header/rotate.php);
   background-repeat: no-repeat;
   background-position: center center;
   margin: 20px auto;
   clear: both;
   }

2. The body's background, with its own images contained inside the folder "rotate_bak" and styled like this:

   body {
   text-align: center;
   background-color: #CCCCCC;
   background-image: url(rotate-bak/rotate.php);
   margin: 10px 5px;
   padding: 0;
   }

3. This table's left column <td id="leftcol">, with its background images contained inside the "rotate_cell" folder and styled like this:

   #leftcol {
   background-color: #DDDDDD;
   border-right: 1px dashed black;
   background-image: url(rotate-cell/rotate.php);
   background-repeat: no-repeat;
   background-position: center bottom;
   }

4. The image on the left column, with its source attribute set as "src="left_image/rotate.php", with the images contained inside the folder "left_image". In this case the image is not used as a background and should have its own ALT attribute:

   src="left_image/rotate.php" alt="Random image" width="150" height="113"

The images can have any name and all we have to do is upload them into each of the folders; the script will load then every image inside the respective folder and will use those images as the source of the random display.

Follows the code of the PHP script, that should be copied as "rotate.php", present in each folder (you can also see the CSS used):

<?php
/*
By Matt Mullenweg > http://photomatt.net
Inspired by Dan Benjamin > http://hiveware.com/imagerotator.php
Latest version always at:
http://photomatt.net/scripts/randomimage
*/

// Make this the relative path to the images, like "../img" or "random/images/".
// If the images are in the same directory, leave it blank.
$folder = '';

// Space seperated list of extensions, you probably won't have to change this.
$exts = 'jpg jpeg png gif';

$files = array(); $i = -1; // Initialize some variables
if ('' == $folder) $folder = './';
$handle = opendir($folder);
$exts = explode(' ', $exts);
while (false !== ($file = readdir($handle))) {
foreach($exts as $ext) { // for each extension check the extension
if (preg_match('/\.'.$ext.'$/i', $file, $test)) { // faster than ereg, case insensitive
$files[] = $file; // it's good
++$i;
}
}
}
closedir($handle); // We're not using it anymore
mt_srand((double)microtime()*1000000); // seed for PHP < 4.2
$rand = mt_rand(0, $i); // $i was incremented as we went along

header('Location: '.$folder.$files[$rand]); // Voila!
?>

Hope this can help you!

Carlos Simoes > F-Worlds & CPSnet Web Awards