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?
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>