Will "the Mighty" Strohl

Using JavaScript to change the image on a page

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.

One script that I have come to use somewhat frequently is the xGetElementById script from Cross-Browser.com. This is a very easy, fast, and dependable way of using JavaScript to work work with HTML objects on your web page.

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.

.homepage_image_01{
background-image: url(homepage_images/homepage_img_01.jpg);
background-position: top left;
background-repeat: no-repeat;
}

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:

<tr>
<td id="cellImages">
<div class=" style="width: 502px; height: 242px" onclick="switchImage();">&nbsp;</div>
</td>
</tr>

Notice the use of the class "cellImages". This class is telling the table cell to be a specific size - the same dimensions as the size of the images, in pixels. Next, there is a DIV with the name and dimensions of our images. Notice that the class name matches the example above. As an added bonus, I put the name of the JavaScript function in the ONCLICK tag (seen below). This will enable the web site visitor to change the image at will.

The JavaScript that wraps it all up with a neat little bow gets placed at the END OF THE PAGE. This code assumes that there are 10 images. There could be more or less images. You would need to adjust the JavaScript to account for more or less images though. Here is what the script looks like:

/*
(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'
switchImage();

// BEGIN xGetElementById
// (the following snippet requires its own copyright)
// xGetElementById, Copyright 2001-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xGetElementById(e){
if(typeof(e)=='string') {
if(document.getElementById) e=document.getElementById(e);
else if(document.all) e=document.all[e];
else e=null;
}
return e;
}
// END xGetElementById

function switchImage(){
// clear the original timeout so that there are not
// multiple timeouts running at the same time
clearTimeout(toImages);
var rn=Math.floor(Math.random()*10);
switch(rn){
case 0:
xGetElementById('divImages').className='homepage_image_01';
break;
case 1:
xGetElementById('divImages').className='homepage_image_02';
break;
case 2:
xGetElementById('divImages').className='homepage_image_03';
break;
case 3:
xGetElementById('divImages').className='homepage_image_04';
break;
case 4:
xGetElementById('divImages').className='homepage_image_05';
break;
case 5:
xGetElementById('divImages').className='homepage_image_06';
break;
case 6:
xGetElementById('divImages').className='homepage_image_07';
break;
case 7:
xGetElementById('divImages').className='homepage_image_08';
break;
case 8:
xGetElementById('divImages').className='homepage_image_09';
break;
case 9:
xGetElementById('divImages').className='homepage_image_10';
break;
}
// 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.

If the visitor cannot use or has disabled JavaScript, the image used would be the one initially specified in the DIV tag.

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!



blog comments powered by Disqus