Micha: Mehrere Grafiken dynamisch ersetzen

SELF-Forum

Mehrere Grafiken dynamisch ersetzen

Micha Homepage des Autors
– Informationen zu den Bewertungsregeln

Ich weiss, dass das eine ziemliche Anfängerfrage ist, aber auch nach mehreren Stunden Suchen und Probieren komme ich nicht weiter. Ich hab den Verdacht, ich stehe grade ein bisschen auf dem Schlauch und würde mich über Hilfe sehr freuen!

Ich möchte gerne drei unterschiedliche Grafiken zeitlich leicht versetzt durch jeweils eine neue Grafik ersetzen lassen. Wie das mit einer Grafik funktioniert, wird hier ja erklärt:

http://de.selfhtml.org/javascript/objekte/images.htm#src

Wie kann ich drei unterschiedliche Grafiken ansprechen, damit sie jeweils leicht versetzt zwischen zwei Bildern hin- und herschalten?

Grüße,
Micha

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Mehrere Grafiken dynamisch ersetzen

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Micha,

    http://de.selfhtml.org/javascript/objekte/images.htm#src

    das kann man so machen, ich finde es aber problematisch, nur über die Nummer auf die Bilder zuzugreifen. Daher plädiere ich für die getElementBy...-Methoden: http://de.selfhtml.org/javascript/objekte/document.htm.

    Dafür brauchen die Bilder eine eindeutige ID:

    <img id="Otto" src="otto.jpg">
    <img id="Franz" src="franz.jpg">
       usw.

    auf die Quelle der Bilder kannst Du dann mit

    document.getElementById("Otto").src="otto_neu.jpg";

    zugreifen.

    Dazu kannst Du dir auch eine Funktion basteln:

    function Bildwechsel(id,Quelle) {
     document.getElementById(id).src=Quelle;
    }

    Aufgerufen wird das dann mit:

    Bildwechsel("Otto","otto_neu.jpg");
    Bildwechsel("Franz","franz_neu.jpg");
       usw.

    In dieser Form werden aber alle Bilder fast gleichzeitig ausgetauscht. Für eine Zeitsteuerung wird dann noch setTimeout benötigt:

    window.setTimeout('Bildwechsel("Otto","otto_neu.jpg");',1000);
    window.setTimeout('Bildwechsel("Franz","franz_neu.jpg");',2000);

    Jetzt wird das erste Bild nach einer (1000ms) und das zweite nach zwei Sekunden (2000ms) gewechselt.

    Jetzt musst Du nur noch sicherstellen, das die Bilder zum Zeitpunkt des Wechselns auch schon existieren. Der onload-Eventhandler könnte hier helfen.

    Gruß, Jürgen

    PS Die Scripte sind nicht getestet, daher kann eine fehlerfreie Funktion nicht garantiert werden.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Mehrere Grafiken dynamisch ersetzen

      Micha
      – Informationen zu den Bewertungsregeln

      Hallo Jürgen,

      ich werd mich da mal reinfuchsen. Vielleicht bringts mich ja auf die richtige Spur. Danke für die schnelle Hilfe!

      Gruß,
      Micha

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Mehrere Grafiken dynamisch ersetzen

      Micha
      – Informationen zu den Bewertungsregeln

      Das klappt jetzt eigentlich sehr gut. Nochmal 1000 Dank für die Hilfe! Ich müsste jetzt nur wissen, wie ich das Skript dazu bringe, sich zu wiederholen. Das müsste doch mit einer Schleife hinzubekommen sein. Wie formuliere ich die, damit das Ding einfach im Kreis läuft? Das kleine Skript sieht grade so aus:

      function Bildwechsel(id,Quelle) {
      document.getElementById(id).src=Quelle;
      }
      window.setTimeout('Bildwechsel("pic1","bilder/index_04.jpg");',1000);
      window.setTimeout('Bildwechsel("pic2","bilder/index_05.jpg");',2000);
      window.setTimeout('Bildwechsel("pic3","bilder/index_06.jpg");',3000);
      window.setTimeout('Bildwechsel("pic1","bilder/index_01.jpg");',4000);
      window.setTimeout('Bildwechsel("pic2","bilder/index_02.jpg");',5000);
      window.setTimeout('Bildwechsel("pic3","bilder/index_03.jpg");',6000);

      Grüße,
      Micha

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Mehrere Grafiken dynamisch ersetzen

        JürgenB Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Micha,

        wenn der Wechsel "unendlich" laufen soll, musst Du dafür sorgen, dass sich die Wechselfunktionen immer zeitverzögert gegenseitig aufrufen. Das Ganze könnte dann so aussehen:

          
function Bildwechsel(id,Quelle) {  
 document.getElementById(id).src=Quelle;  
}  
function Wechsel_hin() {  
 window.setTimeout('Bildwechsel("pic1","bilder/index_04.jpg");',1000);  
 window.setTimeout('Bildwechsel("pic2","bilder/index_05.jpg");',2000);  
 window.setTimeout('Bildwechsel("pic3","bilder/index_06.jpg");',3000);  
 window.setTimeout('Wechsel_zurueck()',3000);  
}  
function Wechsel_zurueck() {  
 window.setTimeout('Bildwechsel("pic1","bilder/index_01.jpg");',1000);  
 window.setTimeout('Bildwechsel("pic2","bilder/index_02.jpg");',2000);  
 window.setTimeout('Bildwechsel("pic3","bilder/index_03.jpg");',3000);  
 window.setTimeout('Wechsel_hin()',3000);  
}

        starten kannst Du das Alles mit einem onload im Body:

          
<body onload="Wechsel_hin()">

        Gruß, Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Mehrere Grafiken dynamisch ersetzen

          Micha
          – Informationen zu den Bewertungsregeln

          Hallo Jürgen,

          jetzt funktionierts, vielen Dank! Unglaublich, wie einfach das eigentlich ist. Du hast mir den Tag gerettet!

          Grüße,
          Micha

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln