Background Rotator

[classicdisastr]

I swear that I have looked all over the internet for a rotator but it's like impossible. Anyway, what I'm trying to do is...

I have 3 header images, right now the css has the main header image set as the background, then I have a javascript rotator that will change the background randomly every 5 seconds with the images in the array. One problem is that it looks ugly without a transition (I'd like it to fade), and I also want it to go in sequence, not randomly.

Here is the code I'm using now, how can i get it to go in a sequence and to fade?

/*
 * Background Rotator for Header
 *
 */

function ChangeCSSBgImg() {
if (!document.getElementById) return false;

var MyElement = "header" 
var ImgPath = "/nmhs/images/"

if (!document.getElementById(MyElement)) return false;

var random_images = new Array ();
random_images[0] = "header.png";
random_images[1] = "header_students.png";
random_images[2] = "header_band.png";

var $header = document.getElementById(MyElement);
var $backgroundurl = $header.style.backgroundImage;
var ImgURL = "url(" + ImgPath + random_images[rand(random_images.length)] + ")";

if ($backgroundurl != ImgURL) {
$header.style.backgroundImage = ImgURL;
}

movement = setTimeout("ChangeCSSBgImg()",5000);
}

function rand(n) {
    return ( Math.floor ( Math.random ( ) * n ) );
}


function addLoadEvent(func) {
    var oldonload = window.onload;
        if (typeof window.onload != 'function') {
        window.onload = func;
        } else {
        window.onload = function() {
    oldonload();
func();
}
}
}

addLoadEvent(ChangeCSSBgImg);

Thanks (:

[Cupcakes]

Try integrating with this: http://www.malsup.com/jquery/cycle/int2.html

[classicdisastr]

I was going to try that, but I have no idea how any of this works D:

[Baines]

If you're willing to make the switch to jQuery, I'd suggest Innerfade.

However Innerfade requires each fading object to be an actual element inside a list.

If you have text or other elements inside your header that you need to stay there, you could use some CSS positioning to keep the images in place and under the text.

[classicdisastr]

If you're willing to make the switch to jQuery, I'd suggest Innerfade.

However Innerfade requires each fading object to be an actual element inside a list.

If you have text or other elements inside your header that you need to stay there, you could use some CSS positioning to keep the images in place and under the text.

this is what I ended up doing except with Cycle. Easier than I thought it would be. Thanks :D