Hi!
Ich habe auf meiner Seite mehrere kleine Felder, in denen Grafiken nacheinander ablaufen und somit unterschiedliche Gesamtbilder entstehen. Jedes Feld hat somit ein eigenen Array mit den jeweiligen Bildern. Der Bildwechsel klappt soweit wunderbar. Ich möchte nur erreichen, dass die Bilder nich so abgehakt wechseln, sondern wie mit einem Fade-Out / Fade-In Effekt wechseln. Dazu habe ich ein Script gefunden, was diesen Ansprüchen 100% entspricht. Das Script kapier ich und kriegs auch umgesetzt nur wie bekomme ich DIESES Script mit meinem verknüpft ????????????
Das hier ist meine Funktion zum Bilderwechseln:
<script language="javascript">
<!--
var time = 2000
var bild = "0";
var a1 = new Array();
var a2 = new Array();
var a3 = new Array();
var b1 = new Array();
var b2 = new Array();
var b3 = new Array();
var c1 = new Array();
var c2 = new Array();
var c3 = new Array();
a1[0] = "img/a2.jpg";
a1[1] = "img/b1.jpg";
a1[2] = "img/c2.jpg";
a1[3] = "img/a1.jpg";
a2[0] = "img/a3.jpg";
a2[1] = "img/c3.jpg";
a2[2] = "img/b2.jpg";
a2[3] = "img/a2.jpg";
a3[0] = "img/c3.jpg";
a3[1] = "img/c1.jpg";
a3[2] = "img/b3.jpg";
a3[3] = "img/a3.jpg";
b1[0] = "img/b2.jpg";
b1[1] = "img/c1.jpg";
b1[2] = "img/a2.jpg";
b1[3] = "img/b1.jpg";
b2[0] = "img/a3.jpg";
b2[1] = "img/c2.jpg";
b2[2] = "img/a1.jpg";
b2[3] = "img/b2.jpg";
b3[0] = "img/b2.jpg";
b3[1] = "img/a3.jpg";
b3[2] = "img/c2.jpg";
b3[3] = "img/b3.jpg";
c1[0] = "img/a2.jpg";
c1[1] = "img/a3.jpg";
c1[2] = "img/c2.jpg";
c1[3] = "img/c1.jpg";
c2[0] = "img/c2.jpg";
c2[1] = "img/b3.jpg";
c2[2] = "img/a1.jpg";
c2[3] = "img/c2.jpg";
c3[0] = "img/a1.jpg";
c3[1] = "img/c3.jpg";
c3[2] = "img/b1.jpg";
c3[3] = "img/c3.jpg";
function bildwechseln() {
document.pic_a1.src = a1[bild];
document.pic_a2.src = a2[bild];
document.pic_a3.src = a3[bild];
document.pic_b1.src = b1[bild];
document.pic_b2.src = b2[bild];
document.pic_b3.src = b3[bild];
document.pic_c1.src = c1[bild];
document.pic_c2.src = c2[bild];
document.pic_c3.src = c3[bild];
bild++;
if (bild == a1.length || bild == a2.length || bild == a3.length
|| bild == b1.length || bild == b2.length || bild == b3.length
|| bild == c1.length || bild == c2.length || bild == c3.length)
{ bild = 0; }
setTimeout("bildwechseln()",time); }
-->
</script>
Alles anzeigen
Hier ist das Script, dass ich gerne mit meinem verbinden würde ...
Den Quelltext kann man komplett kopieren, 2 Bilder namens "1.jpg" und "2.jpg" anlegen und dann seht ihr was gemeint ist.
[img]1.jpg[/img]
[img]2.jpg[/img]
[url='javascript:fade_to ('fadeto', 'fadeto2')']Bild überblenden[/url]
[url='javascript:fade_to ('fadeto2', 'fadeto')']Bilder zur Ausgangssituation überblenden[/url]
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion zum Überblenden von einem Bild auf ein anderes
// Mit den beiden Parametern werden die IDs der Bildelemente angegeben,
// die ineinander übergeblendet werden sollen.
function fade_to (element_id1, element_id2) {
// Prozess noch nicht gestartet?
if (!this.proc) {
// Überblendung auf das gleiche Bild ist nicht möglich!
if (element_id1 == element_id2) {
alert ('Sie muessen die IDs zweier unterschiedlicher HTML-Elemente angeben!');
return;
}
// Prozess starten
this.proc = window.setInterval ('fade_to(\'' + element_id1 + '\', \'' + element_id2 + '\')', 50);
}
else {
// Effekt läuft bereits
// Verweise auf die Elemente holen...
var e = document.getElementById (element_id1);
var e2 = document.getElementById (element_id2);
var opacity1, opacity2;
// Aktuelle Transparenz der beiden Bilder bei
// Opera und Mozilla-Abkömmlingen mit opacity Style-Eigenschaft..
if (!e.filters) {
opacity1 = !e.style.opacity ? 1 : parseFloat (e.style.opacity);
opacity2 = !e2.style.opacity ? 0 : parseFloat (e2.style.opacity);
}
// bzw. über die Filter des IE ermitteln.
else {
opacity1 = !e.filters.alpha.opacity ? 1 : parseFloat (e.filters.alpha.opacity) / 100;
opacity2 = !e2.filters.alpha.opacity ? 0 : parseFloat (e2.filters.alpha.opacity) / 100;
}
// Volle Transparenz von Bild 1 noch nicht erreicht?
if (opacity1 != 0) {
// Transparenz der beiden Bilder um 5% in die unterschiedlichen
// Richtungen anpassen.
opacity1 -= 0.05;
opacity2 += 0.05;
// Anpassung der Styles erfolgt wieder Browserabhängig
if (!e.filters) {
e.style.opacity = opacity1;
e2.style.opacity = opacity2;
}
else {
e.filters.alpha.opacity = opacity1;
e2.filters.alpha.opacity = opacity2;
}
}
else {
// Volle Transparenz von Bild 1 erreicht!
// Das andere Bild ist in diesem Fall vollständig eingeblendet!
window.clearInterval (this.proc);
this.proc = null;
}
}
}
// -->
</script>
Alles anzeigen
Wäre super, wenn mir dabei jemand helfen könnte.
1000 Dank
lg
Oliver
