Backgroundimage wechseln

[Fabian]

Hallo,

auf einer Seite habe ich ein DIV mit einem background-image. Dieses wechsle ich immer wieder mal durch. Das klappt problemlos mittelsdocument.getElementById("content").style.backgroundImage = ...

Nun wollte ich, dass nicht einfach das Bild auf einen Schlag wechselt, sondern, dass es mit einem Überblendeffekt wechselt. Auch das klappt (fade-Funktion), aber leider wird das ganze DIV samt Inhalt ausgeblendet und eingeblendet und nicht nur das Hintergrundbild.

Gibt es eine Möglichkeit nur dem background-image des DIVS den Fade-Effekt zuzuweisen?

Hier der Code (in den notwendigen Auszügen):

  
<script type="text/javascript">  
var bgimages=new Array();  
var pathToImg=new Array();  
var inc=-1;  
bgimages[0] = "img/bild1.jpg"  
bgimages[1] = "img/bild2.jpg"  
bgimages[2] = "img/bild3.jpg"  
//Images vorladen  
for (i=0; i < bgimages.length; i++) {  
	pathToImg[i]=new Image();  
	pathToImg[i].src=bgimages[i];  
}  
  
function bgfade() {  
	if (inc < bgimages.length-1) {  
		inc++  
	} else {  
		inc=0  
	}  
	document.getElementById("content").style.backgroundImage = "url("+pathToImg[inc].src+")";  
	fade();  
}  
  
function fade(step) {  
	step = step || 0;  
	document.getElementById("content").style.opacity = step/100;  
	document.getElementById("content").style.filter = "alpha(opacity=" + step + ")";  
	step = step + 2;  
	if (step <= 100) {  
		window.setTimeout(function () { fade(step); }, 1);  
	} else {  
		step = 0;  
	}  
}  
  
if (document.all||document.getElementById) window.onload=new Function('setInterval("bgfade()",10000)')  
</script>  

  
<div id="content" style="background-image: url(img/bild1.jpg); background-repeat: no-repeat;">  
	<div id="text">TEXT IM DIV</div>  
</div>