<div id=”home-photo”><img src=”living.jpg” id=”photo” alt=”"></div>
var ImageArr1 = new Array(”living.jpg”,”trail.jpg”,”pond.jpg”);
var ImageHolder1 = document.getElementById(’photo’);
var a = eval(”ImageArr”+whichHolder);
var b = eval(”ImageHolder”+whichHolder);
b.src = a[Start];
Here’s how it works. See the div labelled “home-photo”? That wraps around the image that is to be replaced with other images. The img tag within the home-photo div has its own id=”photo” element which, no surprise, is called in the var ImageHolder1 = document.getElementById(’photo’). If you want to change the id=photo element to, say, id=xyz then you just change ‘photo’ to ‘xyz’ in the var ImageHolder1 = document.getElementById(’xyz’) line. (By the way, ‘var’ is shorthand for variable. You’re just setting a variable that grabs the element tagged id=”xyz”.)
To specify the images to rotate, just add file path and image names to the var ImageArr1 = new Array(”", “”, “”) line. Be careful to wrap each file path and image name with double quotes with a comma between each and you’ll be fine.
The last element to set is the ‘3500′ at the end of the window.setTimeout(..) line. That’s the number of milliseconds between the display of each image.