Supportnet / Forum / Skripte(PHP,ASP,Perl...)
Fade Effekt bei Randombildwechsel
Frage
Aloha,
Ich habe eine Java Script geschrieben welches aus einem
Ordner aus 5 Bildern immer eins auswählt und dieses dann
anzeigt und dann nach ein paar Sekunden wieder wechselt.
Es sieht folgendermaßen aus:
[code]<script language="JavaScript" type="text/javascript">
function LoadImage(){
var x = Math.floor(1+(5)*(Math.random()));
var path = "Wechselbilder/";
document.getElementById("headerimage").src =
path+"pics"+x+".gif";
setTimeout('LoadImage()', 5000);
}
</script>[/code]
[code]<body onLoad="LoadImage()">[/code]
Der Bilderwechsel funktioniert super..Nur hätte ich noch gerne
das die Bilder ein und aus faden beim Wechsel d.h.
transparent in das nächste über gehen.
Ist das realisierbar? Und wenn ja, wie? Habe schon ein paar
Versuche hinter mir und bin nicht wirklich weit gekommen.
Wär super wenn sich jemand dafür kurz die Zeit nehmen
könnte.
Vielen Dank
MFG
Antwort 1 von Computerfreaki
Wenn du dich ein bisschen mit JavaScript auskennst kannst du dir diesen Skript mal anschauen:
http://brainerror.net/scripts/javascript/blendtrans/
Musst dann einfach in deine Funktion einbauen. Steht halt alles in Englisch :-(
Gruß Computerfreaki
http://brainerror.net/scripts/javascript/blendtrans/
Musst dann einfach in deine Funktion einbauen. Steht halt alles in Englisch :-(
Gruß Computerfreaki
Antwort 2 von Sypro
Hatte ich schonmal angeschaut , aber kam nicht wirklich damit
zu recht.
Bin nicht so der Java Profi.
zu recht.
Bin nicht so der Java Profi.
Antwort 3 von katy
Hallo Sypro,
das geht prinzipiell nicht, jedenfalls nicht in einem vertretbaren Rahmen. Die von Computerfreaki vorgeschlagene Variante hilft da auch nix, denn auch dabei würde zuerst das Bild gewechselt werden und dann die Opacity des neuen langsam geändert werden. Beide zugleich sind nie sichtbar, es sein denn du haust das alte Bild in den Hintergrund des umschließenden Elements. Das wäre wirklcih aufwändig.
Warum machst du nicht eine simple GIF-Animation? Da gibt es Überblendeffekte, es erfordert kein JavaScript und funktioniert in allen Browsern.
katy
das geht prinzipiell nicht, jedenfalls nicht in einem vertretbaren Rahmen. Die von Computerfreaki vorgeschlagene Variante hilft da auch nix, denn auch dabei würde zuerst das Bild gewechselt werden und dann die Opacity des neuen langsam geändert werden. Beide zugleich sind nie sichtbar, es sein denn du haust das alte Bild in den Hintergrund des umschließenden Elements. Das wäre wirklcih aufwändig.
Warum machst du nicht eine simple GIF-Animation? Da gibt es Überblendeffekte, es erfordert kein JavaScript und funktioniert in allen Browsern.
katy
Antwort 4 von Sypro
Und einfach nur raus faden + rein faden ohne das andere Bild im Hintergrund? Ist das möglich?
Antwort 5 von katy
ja, das geht zB. über das Skript, das CF vorschlug. Einfach ist auch das nicht, da Opacity in allen Browsern anders implementiert ist und daher solch ein Skript x verschiedene Varianten behrrschen muss.
Du könntest natürlich googlen, ob du irgendwo eine deutschsprachige Anleitung findest.
katy
Du könntest natürlich googlen, ob du irgendwo eine deutschsprachige Anleitung findest.
katy
Antwort 6 von Computerfreaki
Hallo Sypro,
hier hab ich noch einen Link für dich gefunden. Dieser umfasst gleich eine ganze Diashow mit Fade-Effekt:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
hier hab ich noch einen Link für dich gefunden. Dieser umfasst gleich eine ganze Diashow mit Fade-Effekt:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Antwort 7 von katy
Hallo Computerfreaki,
wenn Sypro schon den anderen Code nicht versteht, dann diesen - entschuldige den Ausdruck - Mist schon gar nicht. Das ist uralter Code aus den 1990er Jahren und niemand sollte sich unnötig heutzutage noch mit solchen Dinosaurierskripten belasten.
katy
wenn Sypro schon den anderen Code nicht versteht, dann diesen - entschuldige den Ausdruck - Mist schon gar nicht. Das ist uralter Code aus den 1990er Jahren und niemand sollte sich unnötig heutzutage noch mit solchen Dinosaurierskripten belasten.
katy
Antwort 8 von son_quatsch
Katy hat in zweierlei Hinsicht recht:
Was du tun musst:
- DynamicDrive ist wirklich keine gute Quelle. Nur wenn man wenig von JavaScript weiß, weiß man sowas natürlich auch kaum.
- Es ist relativ umständlich. Aber es gibt andere Wege, z.B. vorgefertige Effekt-Bibliotheken zu nutzen.
Was du tun musst:
- Lade dir scriptaculous-js-1.8.1.zip auf der eben beschriebenen Seite runter.
- Entpacke die ZIP-Datei irgendwohin.
- Erstelle dir einen neuen Ordner.
- In diesen Ordner verschiebst du alle Dateien aus den Ordnern src und lib der entpackten ZIP-Datei (und wirklich nur die Dateien, nicht die Ordner selbst).
- Füge in denselben neuen Ordner drei Bilder ein - alle mit jeweils dem Namen bild1.jpg, bild2.jpg und bild3.jpg.
- Kopiere den nachfolgenden Code und speicher diesen als HTML-Datei in diesem neuen Ordner ab.
- Lade die HTML-Datei in einem Browser deiner Wahl - fertig :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>appear / fade</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects" type="text/javascript"></script>
<script type="text/javascript">
var iDauerEffekt= 2000 // wie lange dauert der Fade-Effekt (in Millisekunden)
, iDauerAnzeige= 4000 // wie lange wird das Bild angezeigt (in Millisekunden)
, iAnzahlBilder= 3 // wieviele Bilder gibt es (ab 1 beginnend)
, sBildPrefix= 'bild' // der Pfad zu den Bildern mit abschließendem Slash und evt. Teil des Dateinamens
, sBildEndung= '.jpg' // Dateiendung der Bilder
, sBildElement= 'bild'; // id des IMG-Elements
function Ausblenden() {
Effect.Fade( sBildElement, { duration: (iDauerEffekt/ 1000) } );
setTimeout( 'Laden()', iDauerEffekt );
}
function Laden() {
var x= Math.floor( 1+ iAnzahlBilder* Math.random() );
document.getElementById( sBildElement ).src= sBildPrefix+ x+ sBildEndung;
setTimeout( 'Einblenden()', 50 );
}
function Einblenden() {
if ( !document.getElementById( sBildElement ).complete ) {
setTimeout( 'Einblenden()', 300 );
return;
}
Effect.Appear( sBildElement, { duration: (iDauerEffekt/ 1000) } );
setTimeout( 'Ausblenden()', (iDauerEffekt+ iDauerAnzeige) );
}
</script>
</head><body onload="Laden();">
<div style="width: 500px; height: 400px; background: #c2defb; border: 1px solid #333;">
<img id="bild" alt="" style="display: none;" src="void" />
</div>
</body></html>
Antwort 9 von Sypro
Wow. Danke euch allen erstmal. Ich werde mir das mal angucken!
Antwort 10 von Sypro
Statusbericht:
Das Script funktioniert 1A.
Vielen DANK nochmals ;)
Das Script funktioniert 1A.
Vielen DANK nochmals ;)