Background image to rotate with a fade

Hi,
What I’m trying to figure out is how to get background images to rotate with a fade in a header without using an image in div in the body.
A combination of javascript and CSS – not sure if this is the correct forum or not?

I can achieve an image changing/rotating in a div using the code just below. But I have to refresh the page for the image to change.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <title>Rotate Images</title>
        <script type="text/javascript">
			var backgroundSrcs = new Array("list-of-images");
			function pickimage()
			{
				//This line picks an image at random from the list you entered above
				var bgimage=backgroundSrcs[(Math.round(Math.random()*(backgroundSrcs.length-1)))]
				
				//This line applies the background image to your header
				//document.getElementById("header").style.backgroundimage = "url('" + bgimage + "')";
				document.getElementById("header").style.background = "url('" + bgimage + "') no-repeat";
			}        
	 </script>

        <style type="text/css">
			#header {
				padding:125px 10px;
				margin-top: 0px;
				background-repeat: no-repeat;
			}   
			h1 {
				padding-bottom: 0;
				font-size: 1.95em;
				color: #f0ebee;
			}         
        </style>

    </head>

    <body onLoad="pickimage();">
        <div id="header">
           <h1>abc def ghi</h1>
        </div>
    </body>

</html>

And I can get the image to rotate, change on its own, with the javascript below but have to do it using through an img div, a place-holder.


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <title>Rotate Images through img tag</title>
        <script type="text/javascript">
			var rotatingImages = new Array("../list-of-images");

            imageCount = rotatingImages.length;
            firstTime = true;
            duration = "3"; //seconds
            function rotateImage(){
                // Cycle through images sequentially starting with a random image
                // Do not update the image if loading is not yet completed
                if (document.getElementById('rotatingImage').complete || firstTime){
                    if (firstTime) {
                        thisImage = Math.floor((Math.random() * imageCount))
                        firstTime = false
                    }else{
                        thisImage++
                        if (thisImage == imageCount) {
                            thisImage = 0
                        }
                    }
                    document.getElementById('rotatingImage').src = rotatingImages[thisImage]
                    setTimeout("rotateImage()", duration * 1000)
                }
            }
        </script>
		<style type="text/css">
			#rotatingImage{
				display:block;
				width:750px;
				border:2px solid #997;
			}
		</style>
    </head>
    <body onLoad="rotateImage();">
        <div id="header">
            [I]<img id="rotatingImage" src="" alt="">[/I]
        </div>
    </body>
</html>

So what I really would like to do is have the image rotate through the div and not have to have the img tag present.

I haven’t even tackled the fade but have some thoughts about this. Since it’s the header div I want to do the fading not the img tag, I’m thinking the way to make the fade work will be the same.

thanks so much in advance

Anyone please?
Should I be in the CSS forum?

thank you