I'm trying to get this banner ad to rotate every 5 seconds. I'm obviously not doing something right, but can't figure out what it is that I'm messing up. Here's the code:

<!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" lang="en" xml:lang="en" dir="ltr">
<head>
<title>Case Projects 4-2 and 4-3</title>

<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS

//////////////////function declarations
var curImage="adImage1";
var changeImages;
function ads() {
	if (curImage == "adImage2") {
		document.images[0].src = "adImage1.gif";
		curImage = "adImage2";
	}
	if (curImage == "adImage3") {
		document.images[0].src = "adImage2.gif";
		curImage = "adImage3";
	}
	if (curImage == "adImage4") {
		document.images[0].src = "adImage3.gif";
		curImage = "adImage4";
	}
	if (curImage == "adImage5") {
		document.images[0].src = "adImage4.gif";
		curImage = "adImage5";
	}
	if (curImage == "adImage6") {
		document.images[0].src = "adImage5.gif";
		curImage = "adImage6";
	}
}

function home1() {
	document.images[1].src = "home1.gif";
}
function home2() {
	document.images[1].src = "home2.gif";
}
function faq1() {
	document.images[2].src = "faq1.gif";
}
function faq2() {
	document.images[2].src = "faq2.gif";
}
function guestbook1() {
	document.images[3].src = "guestbook1.gif";
}
function guestbook2() {
	document.images[3].src = "guestbook2.gif";
}
function join1() {
	document.images[4].src = "join1.gif";
}
function join2() {
	document.images[4].src = "join2.gif";
}

//STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body onload="var changeImages=setInterval('ads()',5000);">

<p><div align="center"><img src="adImage1.gif"/></div></p><br /><br />

<p>
<a href="home.html"><img src="home1.gif" border="0" onmouseover="home2();" onmouseout="home1();"></a><br />
<a href="faqs.html"><img src="faq1.gif" border="0" onmouseover="faq2();" onmouseout="faq1();"></a><br />
<a href="guestbook.html"><img src="guestbook1.gif" border="0" onmouseover="guestbook2();" onmouseout="guestbook1();"></a><br />
<a href="join.html"><img src="join1.gif" border="0" onmouseover="join2();" onmouseout="join1();"></a></p>


</body>
</html>

i just wrote this and it works for me:

<script type="text/javascript">
setInterval('ads()', 5000);
var i = 1;
var array = new Array();
array[0] = 'adImage1.gif';
array[1] = 'adImage2.gif';
array[2] = 'adImage3.gif';
array[3] = 'adImage4.gif';
array[4] = 'adImage5.gif';
function ads() {

if (i == 5) {
i = 0;
}
else {
document.getElementById('ad').src = array[i];
i++;
}
}
</script>

add you have to do is replace "<img src="adImage1.gif"/>" with "<img id="ad" src="adImage1.gif"/>"

Okay, seems a lot easier with the array approach. But is there any way to do it with an if/if-else/etc approach?

here it is:

<script type="text/javascript">

setInterval('ads()', 5000);

var image = 'adImage1.gif';

function ads() {

var obj = document.getElementById('ad');

if (image == 'adImage1.gif') {
obj.src = 'adImage2.gif';
image = 'adImage2.gif';
}
else if (image == 'adImage2.gif') {
obj.src = 'adImage3.gif';
image = 'adImage3.gif';
}
else if (image == 'adImage3.gif') {
obj.src = 'adImage4.gif';
image = 'adImage4.gif';
}
else if (image == 'adImage4.gif') {
obj.src = 'adImage5.gif';
image = 'adImage5.gif';
}
else if (image == 'adImage5.gif') {
obj.src = 'adImage1.gif';
image = 'adImage1.gif';
}

}

</script>

you would still have to use " <img id="ad" src="images/1.bmp" /> "

you could also you a switch statement

<script type="text/javascript">

setInterval('ads()', 5000);

var image = 'adImage1.gif';

function ads() {

var obj = document.getElementById('ad');

switch(image) {

case "adImage1.gif":
obj.src = 'adImage2.gif';
image = 'adImage2.gif';
break;
case "adImage2.gif":
obj.src = 'adImage3.gif';
image = 'adImage3.gif';
break;
case "adImage3.gif":
obj.src = 'adImage4.gif';
image = 'adImage4.gif';
break;
case "adImage4.gif":
obj.src = 'adImage5.gif';
image = 'adImage5.gif';
break;
case "adImage5.gif":
obj.src = 'adImage1.gif';
image = 'adImage1.gif';
break;

}

}

</script>

Thanks SO much for your help! It was really beneficial to see the same thing accomplished in more than one manner.

I've been experimenting trying to figure out how to attach links to these. Won't do much good being there if I can't figure out how to make them go somewhere I suppose. :) All that I can figure out how to do is put a link on the <img> tag which remains the same for all of the banners.

This article has been dead for over six months. Start a new discussion instead.