JavaScript Tutorial: Adding Rotating Images to Your Web Site

Sometimes a single image just isn’t enough to showcase all that you want to promote on your site. If you’ve ever wondered how some sites get several images to rotate and you’d like to do that yourself, well, wonder no more. I’m here to show you how it’s done. Also, as an added benefit, I will show you how you can update your images in one location and have those updates appear globally on your site.

Let’s say you have a cooking site, and you want pictures of the five most recent meals that you’ve featured to rotate in the banner. Or, let’s say you have a real estate site and you want pictures of your 10 most recent listings to rotate in a specific spot on all of your pages. To add functionality, you want each image to link to a different page. All of this is no problem with the following code.

First, you need to get organized. Collect all of your images into the same folder and make sure they are the same size. If they are not the same size and you don’t want to distort them, then simply resize the canvas of each image and do not resize the image itself. That way, the placeholder where the images appear won’t change shape as each new image appears.

Second, collect all of the links that you want associated with the images and save them somewhere convenient so you can copy and paste them later.

Third, you need to paste the following into the header for each page you want the image rotator to appear:

<script language=”JavaScript1.2″>
var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6
// place your images, text, etc in the array elements here
var items = new Array();
    items[0]=”<a href=’link.htm’ ><img alt=’image0 (9K)’ src=’ /Images/image0.jpg’ height=’300′ width=’300′ border=’0′ /></a>”; //a linked image
    items[1]=”<a href=’link.htm’><img alt=’image1 (9K)’ src=’/Images/image1.jpg’ height=’300′ width=’300′ border=’0′ /></a>”; //a linked image
    items[2]=”<a href=’link.htm’><img alt=’image2 (9K)’ src=’/Images/image2.jpg’ height=’300′ width=’300′ border=’0′ /></a>”; //a linked image
   items[3]=”<a href=’link.htm’><img alt=’image3 (9K)’ src=’/Images/image3.jpg’ height=’300′ width=’300′ border=’0′ /></a>”; //a linked image
    items[4]=”<a href=’link.htm’><img alt=’image4 (9K)’ src=’/Images/image4.jpg’ height=’300′ width=’300′ border=’0′ /></a>”; //a linked image
    items[5]=”<a href=’link.htm’><img alt=’image5 (18K)’ src=’/Images/image5.jpg’ height=’300′ width=’300′ border=’0′ /></a>”; //a linked image
function rotater() {
    document.getElementById(“placeholder”).innerHTML = items[current];
    current = (current==items.length-1) ? 0 : current + 1;
    setTimeout(“rotater()”,howOften*1000);
}
function rotater() {
    if(document.layers) {
        document.placeholderlayer.document.write(items[current]);
        document.placeholderlayer.document.close();
    }
    if(ns6)document.getElementById(“placeholderdiv”).innerHTML=items[current]
        if(document.all)
            placeholderdiv.innerHTML=items[current];
    current = (current==items.length-1) ? 0 : current + 1; //increment or reset
    setTimeout(“rotater()”,howOften*1000);
}
window.onload=rotater;
//–>
</script>

At first glance, this code can appear intimidating. However, all you have to do is update the path to the image files and fill in the URLs for the links. Of course, you should also update the height and width attributes to fit your site.

If you only want four images to rotate, then simply delete one of the item rows. If you want to add one, then copy and paste and update items[5] to items[6] and so on.

You’ve now laid the ground work for adding this image rotator to your site. But there is one more step you need to do for your images to appear on the page. Figure out where you want the images to appear on the page and copy in:

<layer id=”placeholderlayer”></layer><div id=”placeholderdiv”></div>

That’s all there is to it. When I first started working on adding an image rotator to my site, it wasn’t as easy as copying and pasting. I went through several different examples of code that I found online. Most of them did not work. This above code didn’t work either, but then I made a few tweaks here and there and managed to get it working. I did the hard part for you. Now all you have to do is update your images and links, do a little copying and pasting, and away you go.

If you decide to use this image rotator on several different pages within your site and then later you need to change the images and content you can do so from one location. However, this does require some planning ahead. Let’s go back to the example of a real estate site. When you save the images, I recommend using the same convention for each image, for example, “House1.jpg” and “House2.jpg” and so forth. Then, when you want to showcase a new series of houses, simply name the new images using the same file names as before. That way, all of your pages will show the new images after the browser clears the cache or you refresh the page.

The same works for each of the links. My recommendation is to name each .htm file, “House1.htm” and “House2.htm” and so forth. This way, all you have to do is update the content within the .htm files and the links in the image rotator will automatically point to the new content.

Doing it this way will save you countless time in going to back to each and every single page with the image rotator and having to update the image source and URLs.

Of course, you will lose the content that you just overwrote, but if you plan ahead, you can rename the prior content to something new and place it in your archives or whatever is appropriate.