Ergebnis 1 bis 4 von 4

Thema: Bildertausch mit Fade-In / Fade-Out

  1. #1
    Azubi(ne)
    Registriert seit
    05.03.2007
    Ort
    Es Pujols - Balears - Formentera - Espana
    Beiträge
    90
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Bildertausch mit Fade-In / Fade-Out

    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:
    Code:
              <script language="javascript">
    	  <!--
    	     var time = 2000
    	     var bild = "0";
    		 var a1 = new Array&#40;&#41;;
    		 var a2 = new Array&#40;&#41;;
    		 var a3 = new Array&#40;&#41;;
    		 var b1 = new Array&#40;&#41;;
    		 var b2 = new Array&#40;&#41;;
    		 var b3 = new Array&#40;&#41;;
    		 var c1 = new Array&#40;&#41;;
    		 var c2 = new Array&#40;&#41;;
    		 var c3 = new Array&#40;&#41;;
    	     
    		 a1&#91;0&#93; = "img/a2.jpg";
    	     a1&#91;1&#93; = "img/b1.jpg";
    	     a1&#91;2&#93; = "img/c2.jpg"; 
    		 a1&#91;3&#93; = "img/a1.jpg"; 
    		 
    		 a2&#91;0&#93; = "img/a3.jpg";
    	     a2&#91;1&#93; = "img/c3.jpg";
    	     a2&#91;2&#93; = "img/b2.jpg"; 
    		 a2&#91;3&#93; = "img/a2.jpg";
    		 
    		 a3&#91;0&#93; = "img/c3.jpg";
    	     a3&#91;1&#93; = "img/c1.jpg";
    	     a3&#91;2&#93; = "img/b3.jpg"; 
    		 a3&#91;3&#93; = "img/a3.jpg"; 
    		 
    		 b1&#91;0&#93; = "img/b2.jpg";
    	     b1&#91;1&#93; = "img/c1.jpg";
    	     b1&#91;2&#93; = "img/a2.jpg"; 
    		 b1&#91;3&#93; = "img/b1.jpg"; 
    		 
    		 b2&#91;0&#93; = "img/a3.jpg";
    	     b2&#91;1&#93; = "img/c2.jpg";
    	     b2&#91;2&#93; = "img/a1.jpg"; 
    		 b2&#91;3&#93; = "img/b2.jpg";
    		 
    		 b3&#91;0&#93; = "img/b2.jpg";
    	     b3&#91;1&#93; = "img/a3.jpg";
    	     b3&#91;2&#93; = "img/c2.jpg"; 
    		 b3&#91;3&#93; = "img/b3.jpg";  
    	     
    		 c1&#91;0&#93; = "img/a2.jpg";
    	     c1&#91;1&#93; = "img/a3.jpg";
    	     c1&#91;2&#93; = "img/c2.jpg"; 
    		 c1&#91;3&#93; = "img/c1.jpg"; 
    		 
    		 c2&#91;0&#93; = "img/c2.jpg";
    	     c2&#91;1&#93; = "img/b3.jpg";
    	     c2&#91;2&#93; = "img/a1.jpg"; 
    		 c2&#91;3&#93; = "img/c2.jpg";
    		 
    		 c3&#91;0&#93; = "img/a1.jpg";
    	     c3&#91;1&#93; = "img/c3.jpg";
    	     c3&#91;2&#93; = "img/b1.jpg"; 
    		 c3&#91;3&#93; = "img/c3.jpg"; 
    		 
    		 function bildwechseln&#40;&#41; &#123;
    	        document.pic_a1.src = a1&#91;bild&#93;;
    			document.pic_a2.src = a2&#91;bild&#93;;
    			document.pic_a3.src = a3&#91;bild&#93;;
    			document.pic_b1.src = b1&#91;bild&#93;;
    			document.pic_b2.src = b2&#91;bild&#93;;
    			document.pic_b3.src = b3&#91;bild&#93;;
    			document.pic_c1.src = c1&#91;bild&#93;;
    			document.pic_c2.src = c2&#91;bild&#93;;
    			document.pic_c3.src = c3&#91;bild&#93;;
    			
    	        bild++;
    			
    	        if &#40;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&#41; 
    			   &#123; bild = 0; &#125;
    			
    			setTimeout&#40;"bildwechseln&#40;&#41;",time&#41;; &#125;
    	  -->
    	  </script>
    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.

    Code:
    [img]1.jpg[/img]
    [img]2.jpg[/img]
    		
    Bild &uuml;berblenden
    
    		Bilder zur Ausgangssituation &uuml;berblenden
    		<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 &#40;element_id1, element_id2&#41; &#123;
    			// Prozess noch nicht gestartet?
    			if &#40;!this.proc&#41; &#123;
    				// Überblendung auf das gleiche Bild ist nicht möglich!
    				if &#40;element_id1 == element_id2&#41; &#123;
    					alert &#40;'Sie muessen die IDs zweier unterschiedlicher HTML-Elemente angeben!'&#41;;
    					return;
    				&#125;
    				// Prozess starten
    				this.proc = window.setInterval &#40;'fade_to&#40;\'' + element_id1 + '\', \'' + element_id2 + '\'&#41;', 50&#41;;
    			&#125;
    			else &#123;
    				// Effekt läuft bereits
    				// Verweise auf die Elemente holen...
    				var e = document.getElementById &#40;element_id1&#41;;
    				var e2 = document.getElementById &#40;element_id2&#41;;
    				var opacity1, opacity2;
    				// Aktuelle Transparenz der beiden Bilder bei
    				// Opera und Mozilla-Abkömmlingen mit opacity Style-Eigenschaft..
    				if &#40;!e.filters&#41; &#123;
    					opacity1 = !e.style.opacity ? 1 &#58; parseFloat &#40;e.style.opacity&#41;;
    					opacity2 = !e2.style.opacity ? 0 &#58; parseFloat &#40;e2.style.opacity&#41;;
    				&#125;
    				// bzw. über die Filter des IE ermitteln.
    				else &#123;
    					opacity1 = !e.filters.alpha.opacity ? 1 &#58; parseFloat &#40;e.filters.alpha.opacity&#41; / 100;
    					opacity2 = !e2.filters.alpha.opacity ? 0 &#58; parseFloat &#40;e2.filters.alpha.opacity&#41; / 100;
    				&#125;
    				// Volle Transparenz von Bild 1 noch nicht erreicht?
    				if &#40;opacity1 != 0&#41; &#123;
    					// 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 &#40;!e.filters&#41; &#123;
    						e.style.opacity = opacity1;
    						e2.style.opacity = opacity2;
    					&#125;
    					else &#123;
    						e.filters.alpha.opacity = opacity1;
    						e2.filters.alpha.opacity = opacity2;
    					&#125;
    				&#125;
    				else &#123;
    					// Volle Transparenz von Bild 1 erreicht!
    					// Das andere Bild ist in diesem Fall vollständig eingeblendet!
    					window.clearInterval &#40;this.proc&#41;;
    					this.proc = null;
    				&#125;
    			&#125;
    		&#125;
    		// -->
    		</script>

    Wäre super, wenn mir dabei jemand helfen könnte.
    1000 Dank

    lg
    Oliver
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Prinz(essin) Avatar von -Bambino-
    Registriert seit
    21.12.2007
    Ort
    Berlin
    Beiträge
    865
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    4

    Standard

    Vielleicht kannst du ja hiermit was anfang, ist glaube nicht genau das was du willst, aber vielleicht kannst du ja was ableiten...

    KLICK MICH GANZ HART UND FESTE
    wert.TeeeX.de
    Wie gut ist die technische Umsetztung deiner Website wirklich?
    Teste es!

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    05.03.2007
    Ort
    Es Pujols - Balears - Formentera - Espana
    Beiträge
    90
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard hmm ...

    Also das is wahrlich nich ganz das was ich suche ...
    Also nochmal. Vergesst einfach mal das 2. Script.
    Das 1. hab ich mal eben zusammengebastelt und online gestellt.

    http://<br /> <a href="http://labar....com</a><br />

    Da seht ihr genau was ich meine. Was ich nun einfach möchte ist, dass die Bilder nich so einfach wechseln, sondern ein- bzw. ausblenden. Finde dazu einige Tuts im Internet, aber die funzen zum einen nur im IE oder haben Probleme mit mehr wie 1 Container.

    Is das so kompliziert auf meiner Seite einfach ne Funktion fürs FADEN einzubinden?
    Verzweifel

    Danke vielmals

  4. #4
    Azubi(ne)
    Themenstarter

    Registriert seit
    05.03.2007
    Ort
    Es Pujols - Balears - Formentera - Espana
    Beiträge
    90
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Oder ist es von Vorteil das einfach mit animierten GIF's zu machen. Wobei ich mir nich sicher bin wie groß die einzelnen Bilder dann werden...

Ähnliche Themen

  1. JavaScript Fade Effekt mit scriptacolus Problem
    Von 00eraser00 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 28.02.2008, 14:46

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •