I recently had a project where the home page for a web site called for an image that loaded randomly each time the page is loaded. For example, the first time you viewed the home page, you might be looking at monkeys, the next time a llama, and so on.
This worked fine for a while, but as most ideas do, this grew to where the clients wanted to see the image reload frequently on the homepage while viewing it as well. That is fine, but what is the easiest way to do it?
Most of you probably already know that there are probably 100 different ways to do any single task when it comes to web design. In knowing this, I normally try a new way every time it comes to doing something. I like this approach to design because I feel it keeps me well-rounded and open to new ideas.
Here is what I did this time to accomplish this task... First I created the HTML and accompanying design as usual (HTML, CSS, etc.). Then, where I wanted the image to randomly change, I did not place the image. I instead used CSS to specify the background image for a table cell. In addition, the CSS specified other attributes to make sure that the image would be properly displayed.
Now, before you get started, you need to figure out the CORRECT size in pixels that you want or need your image to be and crop all of the images that will used to switch out to be the same dimensions.
Here is an example of the first CSS snippet. Notice the use of the number "01" in the class name. There should be a class for each image that you have. To keep things simple, it is normally best to name the image something similar to the class name.
background-position: top left;
This bit of CSS told the HTML to load the image named "homepage_img_01.jpg" into the background of the element that uses the class name "homepage_image_01".
The HTML where this class name is used, looks like so:
<div class=" style="width: 502px; height: 242px" onclick="switchImage();"> </div>
(C) 2007 StrohlSiteDesign.com. All rights reserved.
This script and the rights to use it are protected by U.S. and Internationl copyright laws. Copying of any of this code is prohibted by law.
Written by : Will Strohl (wills-at-strohlsitedesign-dot-com)
Date Created : 02/08/2006
Date Last Modified : 01/10/2007
You are free to use this script as long as the above copyright statements are left intact.
// number of miliseconds between each image load
// 7000 = 7 seconds
var numInterval = 7000;
// initialize the timeout object
var toImages = setTimeout('switchImage()',numInterval);
// perform the first 'switch'
// BEGIN xGetElementById
// (the following snippet requires its own copyright)
// xGetElementById, Copyright 2001-2007 Michael Foster (Cross-Browser.com)
else if(document.all) e=document.all[e];
// END xGetElementById
// clear the original timeout so that there are not
// multiple timeouts running at the same time
// reset the time to call the switch again
toImages = setTimeout('switchImage()',numInterval);
Notice that all this script does is locate the DIV with the ID of "divImages" and then it changes the class name to the randomly chosen one.
Naturally, you could use a GIF animation or Flash to accomplish this. However, like I said before, I like to try different things whenever I can. Have fun!