Hey, I'm trying to make my banner rotate between a selection of 4 total banners.

/* Banner Generator */
var    timeRefresh = setInterval("bannerChange()", 1000);    
                                                                        
  function bannerChange()
    {    
         var bannerImage = new Array();
                                                                    
             bannerImage[0] = "../images/banner1.png"
             bannerImage[1] = "../images/banner2.png"
             bannerImage[2] = "../images/banner3.png"
             bannerImage[3] = "../images/banner4.png"
                                                                    
                 var i = 0;
                                                        
    
                 for (i=0; i<=4; i++)
                      {
                         document.getElementById('banner').style.backgroundImage = "url(bannerImage[i])";
                       }
                 }

Currently it flashes quickly with the default background image for the #banner I created in the stylesheet. I call the function in the body onload tag so it is running and the firefox error console doesn't say anything. Anyone help?

Each time the function is called i is set to 0 then it loops through all the images.
You redefine the array on each call as well, very wasteful of client resources

It should increment the counter, check for it being greater that the array size then set to 0 if it is.
Then set the image from the array.

so
set the array and counter as global
increment the count on each timeout and change the image.

var    timeRefresh = setInterval("bannerChange()", 1000);    
var i = 0;
var bannerImage = new Array();
    bannerImage[0] = "../images/banner1.png"
    bannerImage[1] = "../images/banner2.png"
    bannerImage[2] = "../images/banner3.png"
    bannerImage[3] = "../images/banner4.png"
                                                                                                                                          
  function bannerChange() {    
  	i++
	if (i > bannerImage.Length) {
		i = 0
		}
	document.getElementById('banner').style.backgroundImage = "url(bannerImage[i])";
}

Not tested BTW looks OK though.

I just tried that out, and right now it flashs the banner that is declared in the css as the background and then reverts to the background color.
My paths for my images are correct, but i'm assuming that since it is going to the background color instead of image that it isn't getting the image location.

it's probably unable to load the images fast enough, because they are called by javascript the images won't be downloaded and cached until required, you could use a preloader but I find using CSS and changing class names to be MUCH quicker.

Javascript & CSS Banner rotator

I'll be doing a write up at some point, thanks for the idea

HTML

Jump To:-
<div id="banner" class="b1" onmouseover="stop();" onmouseout="start();" onclick="jump();"></div>

rest of code
</html>
<script type="text/javascript">
 start();
</script>
<!-- call to start the banner timer -->

CSS

#banner {
	height:82px;
	width:322px;
	background-repeat:no-repeat;
	background-position:center center;
	cursor:pointer;
}
.b0 {
	background-image: url(images/google_logo.gif);
}
.b1 {
	background-image: url(images/yahoo_logo.gif);
}
.b2 {
	background-image: url(images/msn_logo.gif);
}
.b3 {
	background-image: url(images/ask_logo.png);
}

Obviously size everything to suit your pages

javascript

var timeRefresh = 0;
var i = 0;
var bannerImage = 3;
var URL = new Array();
	URL[0] = "www.google.com";
	URL[1] = "www.yahoo.com";
	URL[2] = "www.msn.com";
	URL[3] = "www.ask.com";
	
	function jump() {
		window.location = "http://" + URL[i];
	}	
	function start() {
		timeRefresh = setInterval("bannerChange()", 1000);   
	} 
	function stop() {
		clearInterval(timeRefresh);   
	} 
                                                                                                                                          
  function bannerChange() {    
	  	i++
	if (i > bannerImage) {
		i = 0
		} else {
		}
	document.getElementById('banner').className = "b" + i;
}

Auto start on page load
Banner stops when the mouse is over the div & starts when mouse goes out and a mouse click will take you to the URL that matches the banner

Levi

This may be another way of doing this but take a look at WDT (Link Below) and you'll see that the banner at the top and the one at the top right of the page change on each load.

[merged post]
Sorry, forgot to say if it's of any use you're welcome to the souce code.

Can you add the target url i the javascript? I'm planning to use this in my Site.

target URL?

do you mean the target attribute?