Sibi: Brauche Hilfe beim Bildwechsel.

Ich habe von meinem Boss die Vorgabe bekommen, eine Art Diashow zu erstellen. Also habe ich das Beispiel aus SelfHTML mit den Dynamischen Filtern genommen und versucht zu modifizieren. Das Problem ist, dass die Bilder automatisch umspringen sollen und nicht mittels Mausklick. Gibt es unter JavaScript einen Befehl, der das bewirken kann?

Script sieht bisher wiefolgt aus:

<html>
<head>
<script language="JavaScript">
<!--
Bild0 = new Image();  Bild0.src = "1.jpg";
Bild1 = new Image();  Bild1.src = "2.jpg";
Bild2 = new Image();  Bild2.src = "3.jpg";
Bild3 = new Image();  Bild3.src = "4.jpg";
Bild4 = new Image();  Bild4.src = "5.jpg";
Bild5 = new Image();  Bild5.src = "6.jpg";
Bild6 = new Image();  Bild6.src = "7.jpg";
Bild7 = new Image();  Bild7.src = "8.jpg";
Bild8 = new Image();  Bild8.src = "9.jpg";
Bild9 = new Image();  Bild9.src = "xx.jpg";

var Bild = 0;
function Bildwechsel()
{
 if(Bild == 0)
 {
  Bild = 1; document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild1.src; document.all.DynBild.filters.revealTrans.Play();
 }
 else
 {
 if(Bild == 1)
 {
  Bild = 2;
  document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild2.src; document.all.DynBild.filters.revealTrans.Play();
 }
 else
 {
 if(Bild == 2)
 {
  Bild = 3;
  document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild3.src; document.all.DynBild.filters.revealTrans.Play();
 }
 else
 {
 if(Bild == 3)
 {
  Bild = 4;
  document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild4.src;  document.all.DynBild.filters.revealTrans.Play();
  }
  else
  {
  if(Bild == 4)
  {
  Bild = 5;
  document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild5.src; document.all.DynBild.filters.revealTrans.Play();
  }
  else
  {
  if(Bild == 5)
  {
  Bild = 6;
  document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild6.src;   document.all.DynBild.filters.revealTrans.Play();
  }
  else
  {
  if(Bild == 6)
  {
  Bild = 7;
  document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild7.src; document.all.DynBild.filters.revealTrans.Play();
  }
  else
  {
  if(Bild == 7)
  {
  Bild = 8;
  document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild8.src; document.all.DynBild.filters.revealTrans.Play();
  }
  else
  {
  if(Bild == 8)
  {
  Bild = 9;
  document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild9.src; document.all.DynBild.filters.revealTrans.Play();
} } } } } } } } } }
//-->
</script>
<title></title>
<base target="_self">
</head>
<body link="#B22222" vlink="#B22222" alink="#FFFFFF" style="background-color: #000000">
<div align="center">
  <center>
  <table border="0" width="100%" height="98%">
    <tr>
      <td width="100%" valign="middle" align="center" height="65%">
        <p>
<img id="DynBild" src="1.jpg" style="cursor:hand; filter:revealTrans(Duration=4,Transition=3)" onClick="Bildwechsel()" width="437" height="354" alt="Unsere Fachräume">
      </td>
    </tr>
    <tr>
     <td width="100%" valign="middle" align="center" height="10%" style="color: #B22222">
      <b><font face="Verdana,Arial" size="3">Willst Du unsere Räume erblicken, musst
      du auf den Schriftzug klicken.</font></b>
     </td>
    </tr>
    <tr>
     <td width="100%" valign="middle" align="center" height="10%" style="color: #B22222">
      <b><font face="Verdana,Arial" size="3"><a href="javascript:history.back()">zurück</a></font></b>
     </td>
    </tr>
  </table>
  </center>
</div>
</body>
</html>

Das ganze ist also gewissermaßen vom img-Befehl aus gesteuert. Und dort ist das Problem mit onClick="Bildwechsel()".
Bitte helft mir!

  1. Ich weis nicht ob ich dich richtig verstanden habe, aber wenns das ist was du meinst, dann scheint mir die lösung einfach. onload im bodytag. und dann mit setTimeout das zeitintervall vorgeben

    gruß ron

    1. gruß ron

      Danke erstmal für die Hilfe.

      Ich weis nicht ob ich dich richtig verstanden habe,

      Du hattest mich richtig verstanden.

      onload im bodytag

      Ja, das läuft ...

      und dann mit setTimeout das zeitintervall vorgeben

      ... das nicht richtig. Das wechseln macht er bei den ersten beiden Bildern und dann merkert er mit folgendem Fehler:
      "Es ist ein Laufzeitfehler aufgetreten. Soll der Debugmodus gestartet werden?"
      Ist es eine blöde Frage, wenn ich frage, wo der settimeout-Befehl hinmuss?

      Sibi

      1. so wie ich es sehe würde ich es so machen:

        hab jetzt nur nen teil des quelltextes kopiert.

        Bild = 8;
          document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild8.src; document.all.DynBild.filters.revealTrans.Play();
          }
          else
          {
          if(Bild == 8)
          {
          Bild = 9;
          document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild9.src; document.all.DynBild.filters.revealTrans.Play();
        } } } } } } } } }
        Bild=Bild+1;
        if (Bild < 10} {
        window.setTimeout("Bildwechsel();",2000);
        }}
        //-->
        </script>

        solange die variable Bild unter 10 ist wiederholt er die funktion

        hoffe mal das es so auch stimmt.

        gruß ron

        1. so wie ich es sehe würde ich es so machen:

          Sieht gut aus.

          hab jetzt nur nen teil des quelltextes kopiert.

          Mehr ist ja auch nicht nötig

          Bild = 8;
            document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild8.src; document.all.DynBild.filters.revealTrans.Play();
            }
            else
            {
            if(Bild == 8)
            {
            Bild = 9;
            document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild9.src; document.all.DynBild.filters.revealTrans.Play();
          } } } } } } } } }
          Bild=Bild+1;
          if (Bild < 10} {

          /     Habe hier ^ mal die Klammer in eine Runde umgewandelt, dann funktioniert es bis dahin.

          window.setTimeout("Bildwechsel();",2000);
          }}
          //-->
          </script>

          <title></title>
          <base target="_self">
          </head>  <-- Hier sagt er, erwartet er ein Objekt???

          solange die variable Bild unter 10 ist wiederholt er die funktion

          Kann ich das erweitern? Ich weiß nicht, wieviele Bilder mein Chef hat.

          hoffe mal das es so auch stimmt.

          Trotz weiterer Probleme nochmals Danke.

          gruß ron

          Gruß Sibi

          1. if(Bild == 8)
              {
              Bild = 9;
              document.all.DynBild.filters.revealTrans.Apply(); document.all.DynBild.src = Bild9.src; document.all.DynBild.filters.revealTrans.Play();
            } } } } } } } } }
            Bild=Bild+1;
            if (Bild < 10} {
            /     Habe hier ^ mal die Klammer in eine Runde umgewandelt, dann funktioniert es bis dahin.

            ...ja war ein flüchtigkeitsfehler

            window.setTimeout("Bildwechsel();",2000);
            }}
            //-->
            </script>
            <title></title>
            <base target="_self">
            </head>  <-- Hier sagt er, erwartet er ein Objekt???

            ...wann kommt denn diese meldung?

            solange die variable Bild unter 10 ist wiederholt er die funktion

            Kann ich das erweitern? Ich weiß nicht, wieviele Bilder mein Chef hat.

            in dem du die funktion einfach konsequent so weiter fortführst
            und die zahl

            if (Bild < 10}

            in diesem fall 10 der bildermenge anpasst.

            1. <title></title>
              <base target="_self">
              </head>  <-- Hier sagt er, erwartet er ein Objekt???

              ...wann kommt denn diese meldung?

              Das erste Bild erscheint und dann öffnet sich das Fenster. Und wenn ich dann Debugge hilft das auch nichts, weil mich das Programm dann auch nicht weiterbringt.
              Kann es was mit der Deklarations im img-Tag zu tun haben?
              <img id="DynBild" src="1.jpg" style="cursor:hand; filter:revealTrans(Duration=4,Transition=3)" width="400" height="400" alt="Unsere Fachräume">
              Er macht übrigens keinen Bildwechsel bevor er das meldet.

              in dem du die funktion einfach konsequent so weiter fortführst
              und die zahl

              if (Bild < 10}

              in diesem fall 10 der bildermenge anpasst.

              Ok, mache ich.

              1. ich verstehe gerade auch nicht was da passiert...
                kann man das online sehen?

                würde es leichter machen den fehler zu finden
                bestimmt irgend ein scheiss fehler.

                hätte da noch ne lösung die ich auf unserer bloerseite verwendet habe.
                die bildergallerie auf bloer ist wahrscheinlich genau das wass du gerne hättest. auch viel eleganter als dein vorschlag.
                mehr verrate ich nicht...
                kannst ja mal da reinschauen....

                gruß ron.

                1. ich verstehe gerade auch nicht was da passiert...
                  kann man das online sehen?

                  Nein leider nicht. Aber ich kann die HTML-Datei und die Bilder zippen und dir schicken.

                  würde es leichter machen den fehler zu finden
                  bestimmt irgend ein scheiss fehler.

                  hätte da noch ne lösung die ich auf unserer bloerseite verwendet habe.
                  die bildergallerie auf bloer ist wahrscheinlich genau das wass du gerne hättest. auch viel eleganter als dein vorschlag.
                  mehr verrate ich nicht...
                  kannst ja mal da reinschauen....

                  Hab' fünf Minuten lang versucht da reinzugucken - irgendwie läuft das bei mir nicht *grübel*.

                  Gruß Sibi

                  1. hätte da noch ne lösung die ich auf unserer bloerseite verwendet habe.
                    die bildergallerie auf bloer ist wahrscheinlich genau das wass du gerne hättest. auch viel eleganter als dein vorschlag.
                    mehr verrate ich nicht...
                    kannst ja mal da reinschauen....

                    Hab' fünf Minuten lang versucht da reinzugucken - irgendwie läuft das bei mir nicht *grübel*.

                    Bin schließlich doch noch reingekommen. Aber sehr schlau gemacht - keine Möglichkeit, an den Quellcode dranzukommen - erübrigt jeden Java-Script für die recht Maustaste *g*.
                    Kannst ihn mir ja mal bitte schicken. Meine Email-Adresse ist oben angegeben.

                    Gruß, Sibi

                  2. schick mir deine email und ich gebe dir mein skript...

                    1. schick mir deine email und ich gebe dir mein skript...

                      Meine Email steht zwar bei jeder meiner Nachrichten oben im Kopf, aber für dich auch hier:

                      sibi2083@freenet.de

        2. nachtrag:

          habe eben erst gesehen das deine variable schon hochgezählt wird.
          kannst deshalb Bild=Bild+1; weglassen

          gruß ron

  2. Ich habe von meinem Boss die Vorgabe bekommen, eine Art Diashow zu erstellen. Also habe ich das Beispiel aus SelfHTML mit den Dynamischen Filtern genommen und versucht zu modifizieren. Das Problem ist, dass die Bilder automatisch umspringen sollen und nicht mittels Mausklick. Gibt es unter JavaScript einen Befehl, der das bewirken kann?

    Script sieht bisher wiefolgt aus:

    Hallo Sibi,
    ich misch mich jetzt mal in euren 2-Personen-Thread ein, weil ich denke, Du solltest in deinem Script auf jeden Fall noch etwas ändern,
    unabhängig davon, ob es nun letztenendes funktioniert oder nicht.
    Ich meine damit Deine Schleife wo Du jedesmal abfragst
    if(Bild == 0)
    ...
    if(Bild == 8)
    Was machst Du denn, wenn es mal 100 Bilder werden sollen?
    Dein Problem sollte eigentlich mit Hilfe eines Arrays gelöst werden,
    da wird erstens der Code kürzer und zweitens leichter pflegbar.
    Im folgenden mein Vorschlag.
    Gruß Lutz.

    <html>
    <head>
    <script language="JavaScript">
    <!--
    var i, AnzahlBilder=10;
    Bild=new Array(AnzahlBilder);
    for (i=0; i<9; i++)
    { Bild[i]= new Image();
      Bild[i].src = eval(i+1)+".jpg";
    }
    Bild[9] = new Image();  Bild[9].src = "xx.jpg";

    var BildNr=0;
    function Bildwechsel(n)
    { if (BildNr==AnzahlBilder-1) return; //keine weiteren Bilder
      if (n<BildNr) return; //Bildwechsel wurde bereits durch Klicken vollzogen
      BildNr++;
      document.all.DynBild.filters.revealTrans.Apply();
      document.all.DynBild.src = Bild[BildNr].src;
      document.all.DynBild.filters.revealTrans.Play();
      setTimeout("Bildwechsel("+BildNr+")",5000); //nächster Bildwechsel in 5 Sekunden
    }
    //-->
    </script>
    <title></title>
    <base target="_self">
    </head>
    <body link="#B22222" vlink="#B22222" alink="#FFFFFF" style="background-color: #000000" onLoad='setTimeout("Bildwechsel(0)",5000)'>
    <div align="center">
      <center>
      <table border="0" width="100%" height="98%">
        <tr>
          <td width="100%" valign="middle" align="center" height="65%">
            <p>
    <img id="DynBild" src="1.jpg" style="cursor:hand; filter:revealTrans(Duration=4,Transition=3)" onClick="Bildwechsel(100)" width="437" height="354" alt="Unsere Fachräume">
          </td>
        </tr>
        <tr>
         <td width="100%" valign="middle" align="center" height="10%" style="color: #B22222">
          <b><font face="Verdana,Arial" size="3">Willst Du unsere Räume erblicken, musst
          du auf den Schriftzug klicken.</font></b>
         </td>
        </tr>
        <tr>
         <td width="100%" valign="middle" align="center" height="10%" style="color: #B22222">
          <b><font face="Verdana,Arial" size="3"><a href="javascript:history.back()">zurück</a></font></b>
         </td>
        </tr>
      </table>
      </center>
    </div>
    </body>
    </html>

    1. Hallo Sibi,
      ich misch mich jetzt mal in euren 2-Personen-Thread ein,

      ... klar doch, immer gerne ...

      weil ich denke, Du solltest in deinem Script auf jeden Fall noch etwas ändern,

      ... denke ich auch ...

      unabhängig davon, ob es nun letztenendes funktioniert oder nicht.

      ... oh, es läuft hervorragend ...

      Ich meine damit Deine Schleife wo Du jedesmal abfragst
      if(Bild == 0)
      ...
      if(Bild == 8)
      Was machst Du denn, wenn es mal 100 Bilder werden sollen?

      ... gute Frage, öhmmmm ...

      Dein Problem sollte eigentlich mit Hilfe eines Arrays gelöst werden,

      ... Mist, damit kenne ich mich kaum aus ...

      da wird erstens der Code kürzer und zweitens leichter pflegbar.

      ... sehe ich. Wieso bin ich nicht darauf gekommen? ...

      Im folgenden mein Vorschlag.

      ... immer, gerne doch.
      Auf jeden Fall danke für dein Script. Es läuft wie eine 1!
      Ich habe noch ein paar Sachen geändert, also den Text rausgenommen - gehörte nicht mehr rein und ich hatte vergessen, es rauszunehmen.

      Liebe Grüße, Sibi

      Für alle , die mal ein ähnliches Problem haben sollten, hier das Programm:

      <html>
      <head>
      <script language="JavaScript">
      <!--
      var i, AnzahlBilder=10;
      Bild=new Array(AnzahlBilder);
      for (i=0; i<9; i++)
      { Bild[i]= new Image();
        Bild[i].src = eval(i+1)+".jpg";
      }
      Bild[9] = new Image();  Bild[9].src = "xx.jpg";

      var BildNr=0;
      function Bildwechsel(n)
      { if (BildNr==AnzahlBilder-1) return; //keine weiteren Bilder
        if (n<BildNr) return; //Bildwechsel wurde bereits durch Klicken vollzogen
        BildNr++;
        document.all.DynBild.filters.revealTrans.Apply();
        document.all.DynBild.src = Bild[BildNr].src;
        document.all.DynBild.filters.revealTrans.Play();
        setTimeout("Bildwechsel("+BildNr+")",5000); //nächster Bildwechsel in 5 Sekunden
      }
      //-->
      </script>
      <title></title>
      <base target="_self">
      </head>
      <body link="#B22222" vlink="#B22222" alink="#FFFFFF" style="background-color: #000000" onLoad='setTimeout("Bildwechsel(0)",5000)'>
      <div align="center">
        <center>
        <table border="0" width="100%" height="98%">
          <tr>
            <td width="100%" valign="middle" align="center" height="65%">
              <p>
      <img id="DynBild" src="1.jpg" style="cursor; filter:revealTrans(Duration=4,Transition=3)" width="437" height="354">
            </td>
          </tr>
        </table>
        </center>
      </div>
      </body>
      </html>

      Es kann natürlich beliebig erweiter werden, mit Text usw. ... Sibi