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>  

[Cheatah]

Hi,

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

der Fade-Effekt besteht darin, opacity-Werte zuzuweisen. Diese beziehen sich immer auf das gesamte Element, einschließlich aller Inhalte.

Cheatah

[nemoinho]

der Fade-Effekt besteht darin, opacity-Werte zuzuweisen. Diese beziehen sich immer auf das gesamte Element, einschließlich aller Inhalte.

stimmt!

aber um einen lösungsansatz für dich zu stellen:
du kannst ein container-div nehmen und ihn relativ positionieren, darin befindet sich ein absolut positioniertes div das für den inhalt ist und ein relativ positioniertes div für den text:

<div id="container">  
  <div id="background"></div>  
  <div id="text">TEXT</div>  
</div>

#container {position: relative;}  
#background {width: 100%; height: 100%; position: absolute;}  
#text {position: relative;}

den hintergrundwechsel wendest du dann nicht auf den container an, sondern nimmst hierzu den "background-div".

mfg nemoinho

[Fabian]

aber um einen lösungsansatz für dich zu stellen:

Danke - so werd ich's machen!

Fabian

[Cheatah]

Hi,

Danke - so werd ich's machen!

erzeuge das überflüssige Element bitte mit JavaScript. Im HTML-Code hat es nichts verloren.

Cheatah

[Fabian]

erzeuge das überflüssige Element bitte mit JavaScript. Im HTML-Code hat es nichts verloren.

??? steh ich am Schlauch? Welches Element meinst Du?
Fabian

[Gunnar Bittersmann]

@@Fabian:

»» erzeuge das überflüssige Element bitte mit JavaScript. Im HTML-Code hat es nichts verloren.

??? steh ich am Schlauch? Welches Element meinst Du?

<div id="background"></div>

Live long and prosper,
Gunnar