Solved

Rotate linked banners with a fade

Posted on 2009-05-19
2
610 Views
Last Modified: 2013-12-25
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
Comment
Question by:wattanabi2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 29

Accepted Solution

by:
David H.H.Lee earned 500 total points
ID: 24428629
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
 

Author Closing Comment

by:wattanabi2
ID: 31583277
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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question