• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 619
  • Last Modified:

Rotate linked banners with a fade

Hello,
I have 5 banners with links to within my site that I want to rotate on my home page. I would also like to have these banners transition with a fade if possible.

I've been able to locate code that takes care of the rotation piece but it only works in IE (see below).

Any assistance is greatly appreciated.

Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
</head>
 
<body>
<ilayer id="l1">
	<layer id="l2">
		<div id="l1">
			<div id="l3" style="position:relative">
			</div>
		</div>
	</layer>
</ilayer>
<script language="JavaScript">
<!--
 
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
 
var bannerArray = new Array();
var myCount=0;
// Banner Code Assignment
bannerArray[0] = "<A HREF=\"http://www.aceinstall.com\"><IMG SRC=\"http://ads.yimg.com/eur.yimg.com/a/eu/any/adscenter/adimage.gif\" border=\"0\" width=\"468\" height=\"60\"></A>";
bannerArray[1] = "<A HREF=\"http://www.cgiscript.net\"><IMG SRC=\"http://hamovhotov.com/advertisement/wp-content/uploads/2007/03/468x60ad.gif\" border=\"0\" width=\"468\" height=\"60\"></A>";
bannerArray[2] = "<A HREF=\"http://www.aceinstall.com\"><IMG SRC=\"http://www.outdoored.com/Store/Images/products/OE/468x60.gif\" border=\"0\" width=\"468\" height=\"60\"></A>";
 
bannerRotate();
 
function bannerRotate() {
 
if(myCount > bannerArray.length-1){myCount=0;}
 
// Write out rotation
	if (document.all){			// it is IE
		document.all.l3.innerHTML=bannerArray[myCount];
	}
 
	else if (document.layers){	// it is NN
 
	document.layers.l1.document.layers.l2.document.open();
	document.layers.l1.document.layers.l2.document.write(bannerArray[myCount]);
	document.layers.l1.document.layers.l2.document.close();
	}
setTimeout("bannerRotate()", 3000);
myCount++;
}
// -->
</script>
</body>
</html>

Open in new window

0
wattanabi2
Asked:
wattanabi2
1 Solution
 
David H.H.LeeCommented:
Hi wattanabi2,
Ok, i've amended the code for rotation that work for other browser like firefox. If you're looking for fade effect, that may only work in i.e version. Check this article:
http://brainerror.net/scripts/javascript/blendtrans/
....//existing code 
if (document.all){                      // it is IE
                document.all.l3.innerHTML=bannerArray[myCount];
        }
 
        else if (document.layers){      // it is NN
 
        document.layers.l1.document.layers.l2.document.open();
        document.layers.l1.document.layers.l2.document.write(bannerArray[myCount]);
        document.layers.l1.document.layers.l2.document.close();
        }
	else if (document.getElementById){
         //add this line... 
         document.getElementById("l3").innerHTML=bannerArray[myCount];
        }

Open in new window

0
 
wattanabi2Author Commented:
Thanks x_com. While I'm still missing the fade piece, this gets me off to a good start. I'll take a look at the link and will try to work in the fade piece from there.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now