Sibi: Brauche Hilfe beim Bildwechsel.

SELF-Forum

Brauche Hilfe beim Bildwechsel.

Sibi
– Informationen zu den Bewertungsregeln

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!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Brauche Hilfe beim Bildwechsel.

    ronald beaugeois Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Brauche Hilfe beim Bildwechsel.

      Sibi
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Brauche Hilfe beim Bildwechsel.

        ronald beaugeois Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Brauche Hilfe beim Bildwechsel.

          Sibi
          – Informationen zu den Bewertungsregeln

          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

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Brauche Hilfe beim Bildwechsel.

            rooon Homepage des Autors
            – Informationen zu den Bewertungsregeln

            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.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Brauche Hilfe beim Bildwechsel.

              Sibi
              – Informationen zu den Bewertungsregeln

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

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Brauche Hilfe beim Bildwechsel.

                ronald beaugeois Homepage des Autors
                – Informationen zu den Bewertungsregeln

                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.

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Brauche Hilfe beim Bildwechsel.

                  Sibi
                  – Informationen zu den Bewertungsregeln

                  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

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Brauche Hilfe beim Bildwechsel.

                    Sibi
                    – Informationen zu den Bewertungsregeln

                    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

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                  2. Brauche Hilfe beim Bildwechsel.

                    ronald beaugeois Homepage des Autors
                    – Informationen zu den Bewertungsregeln

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

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Brauche Hilfe beim Bildwechsel.

                      Sibi
                      – Informationen zu den Bewertungsregeln

                      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

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

        2. Brauche Hilfe beim Bildwechsel.

          ronald beaugeois Homepage des Autors
          – Informationen zu den Bewertungsregeln

          nachtrag:

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

          gruß ron

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Brauche Hilfe beim Bildwechsel.

    Lutz T.
    – Informationen zu den Bewertungsregeln

    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>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Brauche Hilfe beim Bildwechsel.

      Sibi
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln