Arathom: Bild automatisch täglich wechseln

Hallo,

ich möchte auf einer Homepage einen automatischen täglichen Bildwechsel einfügen. Ich habe viele möglichkeiten gefunden, die aber alle Datumsabhängig sind (d.h., dass z.B. an jedem 1. eines Monats das selbe Bild angezeigt wird).
Ich habe 40 Bilder, die an 40 Tagen angezeigt werden sollen, am 41. Tag soll wieder das erste Bild gezeigt werden.
Ist das mit Javascirpt überhaupt möglich?
PHP kann ich leider nicht einbinden.

Gruß, Arathom

  1. Hallo,

    ich möchte auf einer Homepage einen automatischen täglichen Bildwechsel einfügen. Ich habe viele möglichkeiten gefunden, die aber alle Datumsabhängig sind (d.h., dass z.B. an jedem 1. eines Monats das selbe Bild angezeigt wird).
    Ich habe 40 Bilder, die an 40 Tagen angezeigt werden sollen, am 41. Tag soll wieder das erste Bild gezeigt werden.
    Ist das mit Javascirpt überhaupt möglich?
    PHP kann ich leider nicht einbinden.

    Gruß, Arathom

    Vorab, ich hab sowas selbst noch nicht gemacht, hab da aber spontan eine Idee.

    Du hast erstmal alle Bilder mit einem gleichen Namen + Nummer von 0 - 40. z.B. bild0.jpg, bild1.jpg etc...
    Dann nimmst du den aktuellen timestamp und schneidest alles weg was kleiner als der Tag ist, also sekunden, minuten, stunden. übrig bleiben sollte ein timestamp der den ganzen Tag gleich ist. Den teilst du jetzt durch die Anzahl der Bilder die du haben möchtest (hier 40) und guckst was übrig bleibt. Hierfür kannst du den % (Modulo) Operator benutzen. Am Ende bleibt eine Zahl zwischen 0-40.
    Jetzt kannst du den Bildstring zusammen bauen.

    Gruß
    T-Rex

    1. @@T-Rex:

      nuqneH

      […] hab da aber spontan eine Idee.
      Du hast erstmal alle Bilder mit einem gleichen Namen + Nummer von 0 - 40. z.B. bild0.jpg, bild1.jpg etc...

      Das ist keine gute Idee.

      Qapla'

      -- Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      1. Das ist keine gute Idee.

        Gute Begründung!
        Werde ich mal drüber nachdenken ;).

        Gruß
        T-Rex

        1. @@T-Rex:

          nuqneH

          Das ist keine gute Idee.

          Gute Begründung!
          Werde ich mal drüber nachdenken ;).

          Tu das. Das erspart mir nämlich, hier auszuschweifen, wo die Begründung doch auf der Hand liegt. Falls du doch noch ein Stichwort brauchst: Wartbarkeit.

          Qapla'

          -- Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. Dann hab ich zwei Stichworte für dich: dynamisch und Geschmacksache.

            1. @@T-Rex:

              nuqneH

              Dann hab ich zwei Stichworte für dich: dynamisch

              Da kann ich dir nicht folgen.

              und Geschmacksache.

              Nein, ist es nicht.

              Was musst du tun, um Bild 5 rauszunehmen? Richtig, _sämtliche_ Dateien von 5 bist zum bitteren Ende umbenennen. Viel Spaß!

              Mit einem Array - wie von mir vorgeschlagen – bist du viel flexibler: Du löschst einfach nur den Eintrag des einen Bildes. Fertig!

              Die Dateinamen müssen keinem strengen Schema unterliegen. Die Ressourcen müssen nicht einmal vom selben Server kommen.

              Das alles sind praktische Gründe, nicht Geschmacksache.

              Qapla'

              -- Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. @@T-Rex:

                nuqneH

                Dann hab ich zwei Stichworte für dich: dynamisch

                Da kann ich dir nicht folgen.

                und Geschmacksache.

                Nein, ist es nicht.

                Was musst du tun, um Bild 5 rauszunehmen? Richtig, _sämtliche_ Dateien von 5 bist zum bitteren Ende umbenennen. Viel Spaß!

                Mit einem Array - wie von mir vorgeschlagen – bist du viel flexibler: Du löschst einfach nur den Eintrag des einen Bildes. Fertig!

                Die Dateinamen müssen keinem strengen Schema unterliegen. Die Ressourcen müssen nicht einmal vom selben Server kommen.

                Das alles sind praktische Gründe, nicht Geschmacksache.

                Qapla'

                Von Bild 5 gibts nur eine Datei nämlich bild5.jpg.
                Wenn du anstatt 40 Bilder 80 hast musst du !!40!! weitere Bildnamen in dein Array pflegen. Bei meiner Variante setzt du den Zähler höher.
                Aber wie gesagt Geschmacksache, wenn du lieber Code schreiben willst, dann mach das ;).

                Grüßle

                1. Hoi!

                  Alles richtig. Und weil man bei beiden Szenarios keinen Spass hat, gibts dynamische Seiten.

                  --
                  Vergesst Chuck Norris.
                  Sponge Bob kann unter Wasser grillen!

  2. @@Arathom:

    nuqneH

    Ich habe 40 Bilder, die an 40 Tagen angezeigt werden sollen, am 41. Tag soll wieder das erste Bild gezeigt werden.
    Ist das mit Javascirpt überhaupt möglich?

    Ja.

    Die URIs der Bilder packst du in ein Array:

    var bilder = [   'http://example.net/bilder/bild1.jpg',   // ...   'http://example.net/bilder/bild40.jpg' ];

    Aus dem aktuellen Timestamp (Millisekunden) berechnest du den Tag, daraus den Rest bei der Division durch bilder.length (Anzahl der Bilder, hier 40) und schon hast du den Index i für das gerade zu verwendende Bild und mit bilder[i] dessen URI.

    Qapla'

    -- Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
  3. Hallo ihr beiden,

    zuerst mal vielen Dank für eure schnelle Antwort.

    Ich hab eure Vorschläge soweit verstanden. Die Bilder liegen auch schon auf dem Server (Bild1.jpg, Bild2.jpg ...) im Ordner Startseitenbilder.
    Leider bin ich nicht gut in javascript. Hab schon manches Script angepasst, aber noch keines selbst geschrieben. Könnt ihr mir da nochmal helfen? Wie sieht das Scirpt genau aus?

    Gruß, Arathom

    1. Mahlzeit Arathom,

      Leider bin ich nicht gut in javascript.

      Das macht nichts.

      Hab schon manches Script angepasst, aber noch keines selbst geschrieben.

      Na, dann wäre das doch jetzt eine ideale Gelegenheit, damit anzufangen.

      Könnt ihr mir da nochmal helfen?

      Klar: wie lautet genau Dein konkretes Problem?

      Wie sieht das Scirpt genau aus?

      Zitat 1824

      MfG,
      EKKi

      --
      sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|

    2. Hallo ihr beiden,

      zuerst mal vielen Dank für eure schnelle Antwort.

      Ich hab eure Vorschläge soweit verstanden. Die Bilder liegen auch schon auf dem Server (Bild1.jpg, Bild2.jpg ...) im Ordner Startseitenbilder.
      Leider bin ich nicht gut in javascript. Hab schon manches Script angepasst, aber noch keines selbst geschrieben. Könnt ihr mir da nochmal helfen? Wie sieht das Scirpt genau aus?

      Gruß, Arathom

      Na klaro, naja wobei ich probiers mal ohne zu testen.

      //--- Allgemein erstmal Bildnummer raussuchen function getPicName() {    var objDateNow = new Date();    var intTimestamp = objDateNow.time();    //--- Hier werden die Sekunden die seit heute Nacht vergangen sind abgezogen. So bleibt bekommst du immer die Zeit (Oder das Datum) von Heute Nach 0 Uhr    intTimestamp = intTimestamp - intTimestamp % (60 * 60 * 24) //-- <- Ein Tag    return intTimestamp % 40; } //--- T-Rex Art function setBildViaRex(intBildNr) {    document.getElementById('imageid').src = "bild" + intBildNr + ".jpg"; } //--- Gunther Art function setBildViaGunther(intBildNr) {    var arBilder = new Object();    arBilder[] = "Bildname1.jpg";    arBilder[] = "zweiterBildname.jpg";    arBilder[] = "Bild3Name.gif";    //--- und so weiter....    document.getElementById('imageid').src = arBilder[intBildNr]; } setBildViaGunther( getPicName() );

      Wie du bereits siehst ist meine Lösung recht schnell umgesetzt. Setzt jedoch einige Dinge vor raus wie z.B. Bilder liegen im gleichen Verzeichnis, gleicher Server, der Name muss bestimmt vergeben werden. Wenn du später keine 40 Bilder hast sondern 80, dann setzt du einfach den Zähler hoch.
      Brauchst du mehr Flexibilität ist Gunthars Lösung vor zu ziehen. Dann kannst du Bildnamen benutzen die keiner Struktur unterliegen etc... du musst jedoch bei jeder Erweiterung das Array ebenfalls erweitern. Welche Variante du benutzen möchtest liegt an dir (Geschmacksfrage eben ;))

      Der Code dort oben ist recht einfach gestrickt (könnte man noch Objektorientiert entwickeln). Zudem hab ich ihn nicht getestet, somit übernehme ich keinerlei Verantwortung.

      Gruß
      T-Rex

      1. Hallo T-Rex,

        var arBilder = new Object();    arBilder[] = "Bildname1.jpg";

        JavaScript scheint nicht gerade deine Muttersprache zu sein.

        Ein leeres Array wird nicht mit new Object(); erzeugt, sondern mit new Array(); oder besser einfach mit [].

        Zuweisungen an ein Arrayelement macht man auch nicht mit etwa mit der (von PHP gleihenen?) Syntax arBilder[] = "Bildname1.jpg";, sondern mit arBilder[1] = "Bildname1.jpg"; oder zum Anfügen z.B. mit arBilder.push("Bildname1.jpg");

        Gruß, Don P

      2. Hallo ihr beiden,

        zuerst mal vielen Dank für eure schnelle Antwort.

        Ich hab eure Vorschläge soweit verstanden. Die Bilder liegen auch schon auf dem Server (Bild1.jpg, Bild2.jpg ...) im Ordner Startseitenbilder.
        Leider bin ich nicht gut in javascript. Hab schon manches Script angepasst, aber noch keines selbst geschrieben. Könnt ihr mir da nochmal helfen? Wie sieht das Scirpt genau aus?

        Gruß, Arathom

        Na klaro, naja wobei ich probiers mal ohne zu testen.

        Ich hab das Script eingebaut, aber es klappt nicht. Was hab ich vergessen oder falsch gemacht?

        <img src="" id="bilder">

        <script language="JavaScript" type="text/JavaScript">
        <!--

        //--- Allgemein erstmal Bildnummer raussuchen
        function getPicName()
        {
           var objDateNow = new Date();
           var intTimestamp = objDateNow.time();
           //--- Hier werden die Sekunden die seit heute Nacht vergangen sind abgezogen. So bleibt bekommst du immer die Zeit (Oder das Datum) von Heute Nach 0 Uhr
           intTimestamp = intTimestamp - intTimestamp % (60 * 60 * 24) //-- <- Ein Tag
           return intTimestamp % 40;
        }

        //--- T-Rex Art
        function setBildViaRex(intBildNr)
        {
           document.getElementById("bilder").src = "Startseitenbilder/Bild" + intBildNr + ".jpg";
        }
        //-->

        </script>

        Gruß, Arathom

        1. Hallo,

          Ich hab das Script eingebaut, aber es klappt nicht. Was hab ich vergessen oder falsch gemacht?

          vergessen - ja, vielleicht.

          //--- T-Rex Art
          function setBildViaRex(intBildNr)
          {
             document.getElementById("bilder").src = "Startseitenbilder/Bild" + intBildNr + ".jpg";
          }

          Sehr schön - rufst du diese Funktion denn auch irgendwo auf?

          //-->

          Übrigens: Javascript-Code in einem HTML-Kommentar zu "verstecken", ist spätestens mit dem Aussterben von Netscape 4 überflüssig und nicht sinnvoll.

          Ciao,
           Martin

          --
          Lieber mit Betty im Wald
          als mit Waldi im Bett.
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

          1. //--- T-Rex Art
            function setBildViaRex(intBildNr)
            {
               document.getElementById("bilder").src = "Startseitenbilder/Bild" + intBildNr + ".jpg";
            }

            Sehr schön - rufst du diese Funktion denn auch irgendwo auf?

            <body onload="setBildViaRex(intBildNr);">

            Übrigens: Javascript-Code in einem HTML-Kommentar zu "verstecken", ist spätestens mit dem Aussterben von Netscape 4 überflüssig und nicht sinnvoll.

            Danke für den Tipp. Spar ich mir in Zukunft.

            Ciao,
            Martin

            1. Hallo,

              Sehr schön - rufst du diese Funktion denn auch irgendwo auf?

              <body onload="setBildViaRex(intBildNr);">

              ah ja ...
              Dann hast du anscheinend die Logik von Funktionsparametern noch nicht verstanden. Du willst der Funktion hier einen Parameter intBildNr übergeben; eine Variable dieses Namens gibt es aber gar nicht. Dass der Parameter *innerhalb* der Funktion so heißt, spielt außerhalb keine Rolle.

              Außerdem kommt getPicName() ja gar nicht zum Einsatz, soweit ich das sehen kann.
              Was du brauchst, ist also:

               * Rufe getPicName() auf - diese Funktion hat keine Parameter
               * Rufe mit dem Rückgabewert von getPicName() die Funktion setBildViaRex() auf.

              Du kannst dabei genau nach diesem Schritt-für-Schritt-Muster vorgehen, dann musst du den Rückgabewert von getPicName() allerdings in einer Hilfsvariablen speichern.

              Du kannst aber auch die beiden Funktionsaufrufe verschachteln:

               setBildViaRex(getPicName());

              "Rufe die Funktion setBildViaRex auf, und beschaffe dir den dazu nötigen Parameter aus der Funktion getPicName()."

              Welche Struktur man bevorzugt (sequentiell oder verschachtelt), ist in erster Linie Geschmackssache.

              So long,
               Martin

              --
              Zwei Mäuse treiben's miteinander. Sagt der Mäuserich: "Hoffentlich ist nicht wieder alles für die Katz."
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

              1. Hallo,

                Sehr schön - rufst du diese Funktion denn auch irgendwo auf?

                <body onload="setBildViaRex(intBildNr);">

                ah ja ...
                Dann hast du anscheinend die Logik von Funktionsparametern noch nicht verstanden. Du willst der Funktion hier einen Parameter intBildNr übergeben; eine Variable dieses Namens gibt es aber gar nicht. Dass der Parameter *innerhalb* der Funktion so heißt, spielt außerhalb keine Rolle.

                OK

                Außerdem kommt getPicName() ja gar nicht zum Einsatz, soweit ich das sehen kann.

                Hab ich wohl bei irgend einem der vielen Versuche gelöscht. Wär aber wohl eh nicht richtig gewesen, wie ichs hatte.

                Ich habs jetzt so gemacht:

                <body onload="setBildViaRex(getPicName());">

                <img src="" id="bild">

                <script language="JavaScript" type="text/JavaScript">
                function getPicName()
                {
                   var objDateNow = new Date();
                   var intTimestamp = objDateNow.time();
                   intTimestamp = intTimestamp - intTimestamp % (60 * 60 * 24);
                   return intTimestamp % 40;
                }
                function setBildViaRex(intBildNr)
                {
                   document.getElementById("bild").src = "Startseitenbilder/Bild"+ intBildNr +".jpg";
                }
                </script>

                </body>

                Geht aber immer noch nicht. Is irgendwo noch ein Schreibfehler??

                Gruß, Arathom

                1. Hi,

                  <body onload="setBildViaRex(getPicName());">

                  okay, damit ist die Aufruflogik schon mal richtig.
                  Bedenke, dass der onload-Handler erst auslöst, wenn alle Bestandteile des Dokuments geladen sind - also auch Stylesheets, externe Scripts und statisch referenzierte Bilder.
                  Wenn du den Aufruf sofort nach dem Laden des "nackten" Dokuments haben möchtest, ggf. noch vor dem Fertigladen externer Ressourcen, dann stell diesen Funktionsaufruf in ein script-Element ganz am Dokumentende.

                  <script language="JavaScript" type="text/JavaScript">

                  Das language-Attribut schadet zwar AFAIK nicht, ist aber ausgesprochen nutzlos.

                  function getPicName()

                  In dieser Funktion steckt erstens ein Schreibfehler:

                     var objDateNow = new Date();
                     var intTimestamp = objDateNow.time();

                  Das Date-Objekt hat keine Methode namens 'time'. Unser T-Rex hat vermutlich getTime() gemeint. Die Fehlerkonsole deines Browsers sollte dir aber schon mitgeteilt haben, dass sie mit time() überfragt ist und deshalb an dieser Stelle das Script abbricht.

                     intTimestamp = intTimestamp - intTimestamp % (60 * 60 * 24);

                  Und hier ist der zweite Fehler - ein Denkfehler. Nein, eigentlich zwei.
                  Denn getTime() liefert nicht Sekunden, wie die Berechnung mit 60*60*24 andeutet, sondern Millisekunden. Und selbst wenn es Sekunden wären - einen Timestamp-Wert in Sekunden breche ich nicht auf Tage herunter, indem ich die Sekunden seit Tagesanfang abziehe. Damit normiere ich den Timestamp nur auf 0:00 Uhr.
                  Richtig - und mit der Deklaration gleich zusammengefasst - wäre es etwa so:

                        var  intTimestamp = Math.floor(objDateNow.getTime() / (24*60*60*1000));

                  In Worten: Nimm den ermittelten Timestamp in Millisekunden, dividiere ihn durch 86'400'000, und du erhältst die Anzahl der Tage seit 01.01.1970; davon liefert Math.floor() schließlich nur den ganzzahligen Anteil.

                     return intTimestamp % 40;
                  }

                  Und schließlich bekommst du durch die Modulo-Division diesen Tageszähler in das Intervall 0..39 abgebildet.

                  Geht aber immer noch nicht. Is irgendwo noch ein Schreibfehler??

                  Du solltest Fehlermeldungen zur Kenntnis nehmen - und vielleicht auch selbst versuchen, sie zu deuten.

                  Ciao,
                   Martin

                  --
                  "Wie geht eigentlich dein neues Auto?"
                  "Es geht nicht, es fährt!"
                  "Äh, ja. Und wie fährt es?"
                  "Och, es geht."
                  Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

                  1. Geht aber immer noch nicht. Is irgendwo noch ein Schreibfehler??

                    Du solltest Fehlermeldungen zur Kenntnis nehmen - und vielleicht auch selbst versuchen, sie zu deuten.

                    Damit hast du natürlich recht. Aber glaub mir, ich hab es versucht.
                    Ich hatte sogar das time durch getTime ersetzt. Danach war keine Fehlermeldung mehr da, aber immer noch kein Bild. Also hab ich time wieder eingebaut. Hätte ja sein können, das nur ein Zusatz fehlt.
                    Außerdem sind manche Fehlermeldungen sehr seltsam, z.B. wenn ein Fehler in Zeile 272 gemeldet wird, aber die Datei nur 82 Zeilen hat. Oder wenn ein fehlendes ; gemeldet wird, aber eigentlich eine ( fehlt.
                    Für jemanden wie mich, der nicht viel Ahnung von Javascript hat, ist das jedenfalls sehr verwirrend.

                    Na egal. Es funktioniert jetzt jdedenfalls.
                    Also vielen Dank, auch für deine Tipps.

                    Gruß, Arathom

                    1. Mahlzeit Arathom,

                      Außerdem sind manche Fehlermeldungen sehr seltsam, z.B. wenn ein Fehler in Zeile 272 gemeldet wird, aber die Datei nur 82 Zeilen hat. Oder wenn ein fehlendes ; gemeldet wird, aber eigentlich eine ( fehlt.

                      Derartig katastrophale Fehlermeldungen bringt eigentlich nur IrgendEin Browserimitat aus Redmond.

                      Für jemanden wie mich, der nicht viel Ahnung von Javascript hat, ist das jedenfalls sehr verwirrend.

                      Ja, das Gefühle kenne ich. Deswegen solltest Du auch eine *richtige* Fehlerkonsole in einem *richtigen* Browser nutzen ...

                      MfG,
                      EKKi

                      --
                      sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|

          2. @@Der Martin:

            nuqneH

            Übrigens: Javascript-Code in einem HTML-Kommentar zu "verstecken", ist spätestens mit dem Aussterben von Netscape 4 überflüssig und nicht sinnvoll.

            Zumal der der Code hier gar nicht vollständig versteckt ist: Die Zeichenfolge '--' schaltet Kommentar an und aus.

            <!--

            beginnt den Kommentar

            //--- Allgemein erstmal Bildnummer raussuchen

            beendet den Kommtar gleich wieder.

            Merke: Nicht '--' innerhalb von HTML-Kommentaren verwenden!

            Damit erübrigt sich jeder Gedanke, Javascript-Code auskommentieren zu wollen, spätestens dann, wenn im Code der '--'-Operator vorkommt.

            Qapla'

            -- Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
  4. Hallo,

    ich möchte auf einer Homepage einen automatischen täglichen Bildwechsel einfügen. Ich habe viele möglichkeiten gefunden, die aber alle Datumsabhängig sind (d.h., dass z.B. an jedem 1. eines Monats das selbe Bild angezeigt wird).
    Ich habe 40 Bilder, die an 40 Tagen angezeigt werden sollen, am 41. Tag soll wieder das erste Bild gezeigt werden.
    Ist das mit Javascirpt überhaupt möglich?
    PHP kann ich leider nicht einbinden.

    Hallo Leute,

    das Javascript funktioniert jetzt. Ich danke euch allen für eure Hilfe und für eure guten Tipps.

    Gruß, Arathom