Überblenden von transparenten Bildern

[Macker]

Hallo,

bin neu hier und noch nicht sehr erfahren mit html und javascript.

Für eine Webseite erstelle ich mir gerade eine Animation mit mehreren Bildern. Das Programm habe ich hier gefunden: Zufälliges wechseln eines Bildes mit Blendeffekt.

Solange ich "normale" Bilder nehme, funktioniert das wunderbar. Dummerweise sind meine Bilder (png) teilweise transparent (d.h. sie sind nicht rechteckig). Das führt dazu, dass das Bild den Teil, wo es transparent ist, beim nächsten Bild nicht überblendet und am Anfang vom übernächsten Bild verschwindet dann dieser Teil abrupt. Ich brauche die Transparenz aber, weil ich die Bilder auf dem farblich variablen Hintergrund der Webseite darstelle und nicht in einem Rahmen.

Oder anders gefragt: Gibt es eine Möglichkeit, bei sich nicht abdeckenden Bilder den Überblendeffekt genauso durchzuführen wie bei sich abdeckenden Bildern?
Mir fällt da nur ein, das eine Bild auszublenden, während das andere Bild einblendet. Aber wie das geht, weiß ich nicht.

Grüße, Macker

 

[threadi]

Würde ich so machen:
Bild 1 in einem img-Tag (a)
Bild 2 in einem anderen img-Tag (b).
(a) und (b) liegen mittels "position: absolute;" übereinander.
(a) würde sofort sichtbar sein, (b) wird zunächst ausgeblendet.
(a) ändern dann die Sichtbarkeit (CSS-Eigenschaft opacity bzw. filter:alpha(opacity=XY)) hin zu unsichtbar während (b) mit Sichtbarkeit auf 0 eingeblendet wird
Bei (a) wird die Sichtbarkeit immer weiter runter geregelt während sie bei (b) immer höher gesetzt wird bis bei (b) 100% erreicht ist.

Das wird z.B. hier so gemacht (Kopfbereich oben links ändert sich je nachdem über welchem Menü der Mauszeiger ist).

Alternative: Flash.

 

[Macker]

Da bin ich leider überfordert. Das hier ist das Programm, das Bilder überblendet (Endlosschleife):

<script type="text/javascript">

var images = new Array(
["adlerkatze1.png", "Bild1", "Bild1"],
["adlerkatze2.png", "Bild2", "Bild2"],
["adlerkatze3.png", "Bild3", "Bild3"],
["adlerkatze4.png", "Bild4", "Bild4"]
);

var speed = 20;

var interval = 4000;

var index = oldIndex = 0;

function start() {
createBackgroundContainer(document.getElementById('image'));
setTimeout('startFading()', interval);
}

function createBackgroundContainer(element) {
var image = document.createElement('img');
image.setAttribute('id', 'image');
image.setAttribute('src', element.src);
image.setAttribute('alt', element.alt);
image.style.width = element.width + 'px';
image.style.height = element.height + 'px';
image.style.margin = '0';

var backgroundContainer = document.createElement('span');
backgroundContainer.setAttribute('id', 'backgroundContainer');
backgroundContainer.style.display = 'block';
backgroundContainer.style.margin = '2em auto 0 auto';
backgroundContainer.style.padding = '0';
backgroundContainer.style.width = element.width + 'px';
backgroundContainer.style.height = element.height + 'px';
backgroundContainer.appendChild(image);

var parent = element.parentNode;
parent.replaceChild(backgroundContainer, element);
}

function startFading() {
var image = document.getElementById('image');
index++;
while (index == 4) {
index = 0;
}
oldIndex = index;

var backgroundContainer = document.getElementById('backgroundContainer');
backgroundContainer.style.backgroundImage = "url('" + document.getElementById('image').src + "')";

image.style.opacity = 0;
image.style.filter = "progid: DXImageTransform.Microsoft.Alpha(opacity=0)";
image.setAttribute('src', images[index][0]);
image.setAttribute('alt', images[index][1]);
image.setAttribute('title', images[index][2]);

for (var i = 0; i < 100; i++) {
setTimeout('fadeIn(' + i + ')', speed*i);
}
setTimeout("startFading()", interval);
}

function fadeIn(i) {
document.getElementById('image').style.opacity = i/100;
document.getElementById('image').style.filter = "progid: DXImageTransform.Microsoft.Alpha(opacity=" + 1 + ")";
}

</script>

Ich müsste jetzt nicht nur ein Bild aufblenden mit document.getElementById('image').style.opacity = i/100;, sondern zwei Bilder gleichzeitig, wobei das erste Bild abblendet und das zweite aufblendet. Das erste Bild hat dann wohl die Anweisung document.getElementById('image').style.opacity = 100/i;, glaube ich. Aber wie bring ich das zusammen?

 

[threadi]

Du musst die beiden Bilder als einzelne Objekte verwenden und deren opacity-Werte jeweils gleichzeitig um den Wert verringern oder erhöhen. Also nicht nur

document.getElementById('image').style.opacity = i/100;

sondern auch

document.getElementById('image2').style.opacity = i/100;

Grob gesagt.

 

[Macker]

zum Abblenden nimmt man:
document.getElementById('image').style.opacity = 1-i/100;

Trotzdem kriege ich es nicht hin, weil ich nicht weiß, wie ich genau das eine Bild aufblende und gleichzeitig das vorherige Bild abblende.

 

[threadi]

Wie in meinem Beispiel oben beschrieben: Du musst beide Bilder als Objekte in JavaScript betrachten und deren Sichtbarkeit jeweils entgegengesetzt abändern.

Sinnhaft:

bild1.sichtbarkeit = bild1.sichtbarkeit - 10
bild2.sichtbarkeit = bild2.sichtbarkeit + 10

 

[Macker]

Das ist mir schon klar. Ich weiß nur nicht, wie ich es in den JavaScript-Text oben reinschreibe.
Also noch mal genauer: Bild 3 muss abgeblendet werden, nachdem es aufgeblendet wurde, bei den anderen Bildern ist es nicht nötig, würde aber nicht stören.

Ich habe schon alles Mögliche probiert, es funktioniert nicht. Mir fehlt einfach das Verständnis, wie ich 2 Bilder gleichzeitig fade. Wenn ich hier noch image2 anfüge, also so:

function fadeIn(i) {
document.getElementById('image').style.opacity = i/100;
document.getElementById('image2').style.opacity = 1-i/100;
document.getElementById('image').style.filter = "progid: DXImageTransform.Microsoft.Alpha(opacity=" + 1 + ")";
}

dann wird zwar ein Bild, das ich im Body als image2 angebe, abgeblendet, aber das läuft parallel zu der Überblendschleife, bringt also nichts. Auch die Versuche, zusätzlich alle image-Anweisungen in image2-Anweisungen zu doppeln, bringen nichts.

Wenn man nur 2 Bilder hat, mag es gehen, mit den vieren (und der Endlosschleife) geht es nicht.
Wenn du weißt, wie es geht, schreib doch einfach die fehlenden Zeilen in den JavaScript-Text, das wäre super.