Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Skripte(PHP,ASP,Perl...)

Skripte(PHP,ASP,Perl...)

Fragevon Sypro vom 21.10.2020, 19:42 Options

Fade Effekt bei Randombildwechsel

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:

<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>

<body onLoad="LoadImage()">

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 schreiben

Antwort 1 von Computerfreaki vom 21.10.2020, 20:40 Options

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

Antwort 2 von Sypro vom 21.10.2020, 20:47 Options

Hatte ich schonmal angeschaut , aber kam nicht wirklich damit
zu recht.
Bin nicht so der Java Profi.

Antwort 3 von katy vom 21.10.2020, 22:38 Options

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

Antwort 4 von Sypro vom 21.10.2020, 22:44 Options

Und einfach nur raus faden + rein faden ohne das andere Bild im Hintergrund? Ist das möglich?

Antwort 5 von katy vom 21.10.2020, 23:14 Options

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

Antwort 6 von Computerfreaki vom 22.10.2020, 06:43 Options

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

Antwort 7 von katy vom 22.10.2020, 08:36 Options

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

Antwort 8 von son_quatsch vom 22.10.2020, 09:53 Options

Katy hat in zweierlei Hinsicht recht:

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.

Lange Rede kurzer Sinn: ich hab hier ein Beispiel mit script.aculo.us zusammengebaut. Und weil es trotz der Dokumentation für dich bestimmt noch andere Hürden gibt, hab ich halt eine voll funktionierende (unter FFOX 1.5, MSIE 6.0 und OPER 9.5 getestetes) Seite gebastelt.

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 :-)

Bleibt zu erwähnen, dass in dem JavaScript selbst ein paar Variablen erklärt sind. Diese kannst du natürlich je nach Belieben verändern. Bei Fragen einfach Rückmeldung geben.

<!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 vom 22.10.2020, 16:02 Options

Wow. Danke euch allen erstmal. Ich werde mir das mal angucken!

Antwort 10 von Sypro vom 28.10.2020, 23:54 Options

Statusbericht:

Das Script funktioniert 1A.
Vielen DANK nochmals ;)

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..