Chaning Background using style.background

[Bendude14]

I am trying to change my background using style.background i have managed this ok but what i am now trying to implement is a fade effect between images.

 

I have the following code but its fading the wrong way and then does not fade my new image is just swaps it. I am sure there will be an easier way to do this if someone can help.

 

 

<script type="text/javascript">

window.onload = slideShow;


var i = 1;
var numOfImages = 3;

	function slideShow()
	{	
		//fade out the image
		setTimeout('initFade();', 1000);

			while(i <= numOfImages)
			{

				//call timeout again to keep going
				setTimeout('changeImage(i);', 5000);

				if(numOfImages == i)
				{
					i = 1;
				}
				else
				{
					i += 1;
				}
				break;

			}

	}


	function changeImage(img)
	{


		//then swap them over
	document.getElementById("HeaderMid").style.background = "url('images/Header"+img+".jpg') no-repeat center center";
	document.getElementById("Header").style.background = "url('images/Header"+img+".png')";




		slideShow();
	}


function initFade() {
var opacity = 0.9;
for (var k=10;k>0;k--)
{	
	setTimeout('setOpacity('+k+')',200*k);

}	
return false;
}

function setOpacity(value)
{

document.getElementById("HeaderMid").style.opacity  = value/10;

//document.getElementById("Header").style.filter = 'alpha(opacity=' + value*10 + ')';
}

</script>

 

Thanks

Ben