fade in, fade out

[Badenixe63]

hallo alle zusammen,

ich habe mir gerade eine Seite zusammengebastelt, sie ist noch nicht perfekt aber läuft schon ganz gut. Ziel ist es, eine Bildpräsentation mit Javascript zu realisieren. hier ist der link zum mal anschauen:

http://ohyeah.oh.funpic.de/diashow/

normalerweise kommt da noch per flash musik dazu, aber die geht auf den funpic testserver nicht drauf...

jetzt würde ich gerne zwei sachen realisieren. Erstens eine preload function, die die Bilder vorher in den cache lädt und währenddessen eine gif-loading.grafik mit ein bisschen text anzeigt. Danach kann man dann die Bilder per array ansprechen und es wird nich mehr jedes vom Webserver angefordert.

und zweitens ganz wichtig, einen kleinen fade in, fade out effekt für die Bilder...

Das Ding so wie es jetzt ist, hat mich schon ne ganze menge hirnschmalz gekostet und jetzt bin ich wirklich am ende meines lateins, hab schon einiges ausprobiert, aber dieses problem wird in der form nirgends besprochen...

angelehnt ist das Design an http://play.blogger.com/ wer sich das mal ansehen möchte...

Danke für eure Hilfe

[Badenixe63]

verdammt, jetzt hab ich doch vergessen den quellcode mitzugeben. Hier ist nachträglich der Javascript:

var bilder = new Array("bilder/1.jpg", "bilder/2.jpg", "bilder/3.jpg", "bilder/4.jpg", "bilder/5.jpg");

var naechstesBild = 0;
var verzoegerung = 6000;
var stat = 0;
var id="";

function start() {
   if (stat == 0) {
      stat = 1;
      id = setTimeout("animation();", verzoegerung);
      document.stat.src = "images/pause.png";
      return;
   }

if (stat == 1) {
      stat = 0;
      clearTimeout(id);
      document.stat.src = "images/play.png";
   }
}

function animation() {
   document.dia.src = bilder[naechstesBild];
   naechstesBild++;
   if (naechstesBild==bilder.length) {
      naechstesBild = 0;
   }
   id = setTimeout("animation();", verzoegerung);
}

function vor() {
 if(stat==1){
      stat = 0;
      clearTimeout(id);
      document.stat.src = "images/play.png";
 }

document.dia.src = bilder[naechstesBild];
      naechstesBild++;
      if (naechstesBild==bilder.length) {
      naechstesBild = 0;
   }
}

function zurueck() {
 if(stat==1){
      stat = 0;
      clearTimeout(id);
      document.stat.src = "images/play.png";
 }

naechstesBild -= 2;

if (naechstesBild == -2) {
 naechstesBild = bilder.length - 2;
 }

else if (naechstesBild == -1) {
      naechstesBild = bilder.length - 1;
 }

document.dia.src = bilder[naechstesBild];
      naechstesBild++;
      if (naechstesBild==bilder.length) {
      naechstesBild = 0;
   }
}

wie gesagt, der funktioniert soweit ganz gut, nur ich komm jetzt nicht weiter...

[Christian S.]

also das mit dem Fade geht über styles.

Du benutzt auch die setTimeout Methode um die Transparenz des einen Bildes runterzusetzen, während das andere Bild schon im Hintergrund ist.

Also Layer übereinander.

Die Transparenz setzt du über style.opacity = 0.5 (0-1, Standard) oder style.filter = "Alpha(opacity=50)"; (0-100, IE)

Dann halt nen Timer aufsetzen und den bei voller Transparenz stoppen. Evtl. immer noch den zIndex wechseln.

Würde dafür einen Container machen mit position:relative. Darin dann die 2 Bilder mit position:absolute.

Gruß
Christian

[Badenixe63]

also das mit dem Fade geht über styles.

Du benutzt auch die setTimeout Methode um die Transparenz des einen Bildes runterzusetzen, während das andere Bild schon im Hintergrund ist.

Also Layer übereinander.

Die Transparenz setzt du über style.opacity = 0.5 (0-1, Standard) oder style.filter = "Alpha(opacity=50)"; (0-100, IE)

Dann halt nen Timer aufsetzen und den bei voller Transparenz stoppen. Evtl. immer noch den zIndex wechseln.

Würde dafür einen Container machen mit position:relative. Darin dann die 2 Bilder mit position:absolute.

und was mach ich mit zwei bildern in unterschiedlichen Formaten ??