How to continuously replace images w/ JavaScript

The website I am working on is washtawimbashoes.com
It is for my brother, as a christmas present. He makes some pretty sweet duct tape shoes.

I am trying to write some JavaScript that will allow me to take the image on the front page, display it for say 10 seconds, then swap it out with another image, display that one for 2 seconds and repeat that continuously.

This is my first writing making a website and using JavaScript so I could use some help. Here was my first attempt:

<script type=“text/javascript”>
for (i=10;i<1000;i=i+1)
{
if (i%5==0)
{
document.write(“<img class=‘aligncenter’ src=‘pic.jpg’”)
}
else if (i%7==0)
{
document.write(“<img class=‘aligncenter’ src=‘pic2.jpg’”)
}
}
</script>

The hope here was that document.write would overwrite the current pic but instead, it just added it below. Is there a way to erase something that you just wrote or replace it?

Any tips would be great.

Thanks,

Rich

once the page has loaded, document.write writes to a new document so you can’t use that for what you want to do.

you will need to use DOM methods to swap the images and setInterval() and/or setTimeout() for your timing functionality.

Here is a fast way of doing what you want. It uses 4 images of the same size (205px x 100px) - nothing magic here, I just happened to have these available. They can be any size and image format. When the page loads it displays the first image which is loaded with the page. It also calls a timeout which waits 2 seconds and then calls the picture loader called nextPic().

nextPic() increments the array pointer, checks to see if the array length has been exceeded and then sets the pointer accordingly. The script then uses the image reference in the array to build the new image tag and then writes it to the page as the innerHTML of the div “imgHolder”.

This is a quick and dirty way to do it because the image size is fixed and so the width and height attributes can remain the same for each image in the build string.

<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<script type=“text/JavaScript”>
<!–
var picCount=0; // global
var picArray= [“img2.gif”,“img3.gif”,“img4.gif”,“img1.gif”] // images all same size (205px x 100px)
//
// gets next picture in array
function nextPic()
{ // check if adding 1 exceeds number of pics in array
picCount=(picCount+1<picArray.length)? picCount+1 : 0;
// build the img to write to page using the new pic reference
var build=‘<img border=“0” src="’+picArray[picCount]+'" width=“205” height=“100”>
';
document.getElementById(“imgHolder”).innerHTML=build;
// repeat this after a pause of 2sec.
setTimeout(‘nextPic()’,2000)
}
//–>
</script>
<style type=“text/css”>
<!–
#imgHolder{ position:absolute; top:100px; left:100px; text-align:left; }
–>
</style>
<title>Image Swap</title>
</head>

<body onload=“setTimeout(‘nextPic()’,2000)”>

<div id=“imgHolder”>
<img border=“0” src=“img1.gif” width=“205” height=“100”>
</div>

</body>

</html>

Thanks for the responses. I’ll try this later today!

So I got it working! However, it only displays in Chrome and Firefox but not in Internet Explorer. Anyone know why? washtawimbashoes.com

Also, does it look good having the image changing back and forth or do you think it is obnoxious?

this works in my IE8, FF3.6, Opera 10, Safari and Chrome.

it displays the first image for 5 secs and the second image for 2 secs continually in a loop. you can alter the display times to suit.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
 
            var imgPaths = [
                ['pic1.jpg',5000],
                ['pic2.jpg',2000]];
            var imgO = new Array();
            var currImg = 0;
            var currDispTime = imgPaths[0][1];
 
            //preload the images
            for(i=0; i < imgPaths.length; i++) {
                imgO[i] = new Image();
                imgO[i].src = imgPaths[i][0];
            }
 
            function swapImg() {
                currImg = (currImg == 0)? 1 : 0;
                currDispTime = (currDispTime == imgPaths[0][1])? imgPaths[1][1] : imgPaths[0][1];
                imgObj.src = imgO[currImg].src;
                setTimeout('swapImg()',currDispTime);
            }
 
            window.onload=function() {
                imgObj = document.getElementById("imgSwap");
                imgObj.src = imgO[currImg].src;
                swapImg();
            }
        </script>
 
    </head>
    <body>
 
        <div>
            <img id="imgSwap" src="" alt="" />
        </div>
 
    </body>
</html>