0

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>
2
Contributors
6
Replies
7
Views
9 Years
Discussion Span
Last Post by kahaj
0

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"/>"

0

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

0

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

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

0

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 topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.