Member Avatar for kahaj

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
  • 231 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by kahaj

Recommended Answers

All 6 Replies

Member Avatar for somedude3488

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

Member Avatar for kahaj

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

Member Avatar for somedude3488

i will make it with the if/else. it will take about 10 mins and then i will repost.

Member Avatar for somedude3488

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>
Member Avatar for kahaj

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

Member Avatar for kahaj

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.