macangelo: Zufallsbilder

Hi,

ich suche eine möglichst simple Möglichkeit, einen image-tag so auszustatten, das er aus einer Gruppe von Bildern nach dem Zufallsprinzip eins auswählt und einsetzt. Wenn Möglich ohne Datenbank. Wie gesagt, möglichst simple.

Hat jemand eine Idee? Schon mal besten Dank im Voraus.

Gruß

Macangelo

  1. Hallo,

    ich suche eine möglichst simple Möglichkeit, einen image-tag so auszustatten, das er aus einer Gruppe von Bildern nach dem Zufallsprinzip eins auswählt und einsetzt. Wenn Möglich ohne Datenbank. Wie gesagt, möglichst simple.

    HTML kann sowas nicht. (Wie bereits 1000mal erwähnt hier.)

    Am "einfachsten" geht das mit PHP, das aus einem Ordner Bilder auswählt und dann eins davon zurückgibt.

    Gruß
    Lachgas

    --
    Keine Verbesserung ist zu klein oder geringfügig, als dass man sie nicht durchführen sollte. (Adorno)
  2. Hallo Macangelo,

    ich suche eine möglichst simple Möglichkeit, einen image-tag so auszustatten, das er aus einer Gruppe von Bildern nach dem Zufallsprinzip eins auswählt und einsetzt. Wenn Möglich ohne Datenbank. Wie gesagt, möglichst simple.
    Hat jemand eine Idee? Schon mal besten Dank im Voraus.

    Mit HTML alleine kommst du - wie N2O schon schrieb - nicht weit. Mit einer beliebigen Programmier-/Scriptsprache z.B. Javascript geht das am einfachsten, wenn du die Dateinamen der Bilder in einem Array speicherst und dann über eine Zufallszahl (gerundet und mit der Anzahl der Bilder-1 multipliziert) auf ein Arrayelement zugreifst. Dann gibst du einfach über document.write() den HTML-Code für das Bild aus und fertig (noscript-Element mit einem statischen Bild für die JS-losen nicht vergessen!). Da ich gestern erst sowas gebastelt habe, ausnahmsweise mal der fertige Code:

    <script type="text/javascript">
    var bilder = new Array(
        'bootssteg.jpg',
        'drachenboote.jpg',
        'sattelplatz.jpg',
        'vereinsgelaende.jpg',
        'zweierrennen.jpg'
    );
    var anzahl = bilder.length;
    var nr = Math.round(Math.random()*(anzahl-1));
    document.write('<p><img src="'+bilder[nr]+'" width="500" alt="" /></p>');
    </script>
    <noscript>
    <p><img src="sattelplatz.jpg" width="500" alt="" /></p>
    </noscript>

    thoretisch könnte man auch ein Bild einbinden und per document.images[x].src die URL ändern - das hätte aber den Nachteil, dass evtl. zwei Bilder geladen werden müssen.

    Grüße aus Nürnberg
    Tobias

    1. Tobias,

      var nr = Math.round(Math.random()*(anzahl-1));

      Das ergibt folgende Wahrscheinlichkeiten:
      bootssteg.jpg        1/8
      drachenboote.jpg     1/4
      sattelplatz.jpg      1/4
      vereinsgelaende.jpg  1/4
      zweierrennen.jpg     1/8

      Wolltest du Gleichverteilung erreichen?
      Gunnar

      --
      „Solang wir noch tanzen können
      und richtig echte Tränen flennen,
      ist noch alles offen,
      ist noch alles drin.“
      (Gundermann)
      1. Wolltest du Gleichverteilung erreichen?

        Dann nicht

        var nr = Math.round(Math.random()*(anzahl-1));

        sondern
              var nr = Math.floor(Math.random()*anzahl);

        Gunnar

        PS. Ich gehe davon aus, dass Math.random() eine Zahl 0 ≤ x < 1 liefert.
        http://javascriptkit.com/jsref/math.shtml#e1

        Gibt's noch eine offizielle JS-Referenz? developer.netscape.com tut's nicht.

        --
        „Solang wir noch tanzen können
        und richtig echte Tränen flennen,
        ist noch alles offen,
        ist noch alles drin.“
        (Gundermann)
        1. Hallo Gunnar,

          Dann nicht

          var nr = Math.round(Math.random()*(anzahl-1));
          sondern
                var nr = Math.floor(Math.random()*anzahl);

          ich schwöre, das habe ich nicht gesehen, bevor ich mein Posting geschrieben habe :-)

          PS. Ich gehe davon aus, dass Math.random() eine Zahl 0 ≤ x < 1 liefert.
          http://javascriptkit.com/jsref/math.shtml#e1

          laut http://de.selfhtml.org/javascript/objekte/math.htm#random@title=selfhtml ist das ebenfalls so.

          Grüße aus Nürnberg
          Tobias

          1. Hallo nochmal,

            laut http://de.selfhtml.org/javascript/objekte/math.htm#random@title=selfhtml ist das ebenfalls so.

            *argh* ich wusste, dass das irgendwann schiefgehen würde, also hier nochmal ohne »ref«:
            laut selfhtml ist das ebenfalls so.

            Grüße aus Nürnberg
            Tobias

          2. PS. Ich gehe davon aus, dass Math.random() eine Zahl 0 ≤ x < 1 liefert.
            http://javascriptkit.com/jsref/math.shtml#e1
            laut selfhtml ist das ebenfalls so.

            http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/ref_r-r.htm#194 sagt auch "between zero and one".

            Wobei ich dem nicht ganz traue; meine Ahnung sagt: 0 kann kommen, 1 nicht.
            Gunnar

            --
            „Solang wir noch tanzen können
            und richtig echte Tränen flennen,
            ist noch alles offen,
            ist noch alles drin.“
            (Gundermann)
      2. Hallo Gunnar,

        var nr = Math.round(Math.random()*(anzahl-1));
        Das ergibt folgende Wahrscheinlichkeiten:
        bootssteg.jpg        1/8
        drachenboote.jpg     1/4
        sattelplatz.jpg      1/4
        vereinsgelaende.jpg  1/4
        zweierrennen.jpg     1/8
        Wolltest du Gleichverteilung erreichen?

        öhh... da habe ich mir ehrlichgesagt noch keine Gedanken drüber gemacht. *schäm*
        Ich habe mal etwas rumprobiert und bin - nach einigen erfolglosen Versuchen meine bisherige Zeile umzustellen - dann im Archiv auf Math.floor gestoßen, und damit:
         var nr = Math.floor(Math.random()*anzahl);
        bekomme ich jetzt die gleiche Häufigkeit:
        0: 200294
        1: 199868
        2: 199468
        3: 200825
        4: 199545
        (die Ergebnisse von 1000000 Schleifendurchläufen)

        Danke für den Hinweis - wieder was gelernt :-)

        Grüße aus Nürnberg
        Tobias

        1. Tobias,

          var nr = Math.floor(Math.random()*anzahl);

          Meine Rede. ;-)

          Wobei ich nirgens gefunden hab, ob Math.random() nicht auch 1 liefern kann, dann gäb's ein Problem.

          bekomme ich jetzt die gleiche Häufigkeit:
          0: 200294
          1: 199868
          2: 199468
          3: 200825
          4: 199545

          Was ist an den fünf _Häufigkeiten_ gleich?

          Du bekommst die gleichen _Wahrscheinlichkeiten_ für jedes Bild.

          Gunnar

          --
          „Solang wir noch tanzen können
          und richtig echte Tränen flennen,
          ist noch alles offen,
          ist noch alles drin.“
          (Gundermann)
          1. Hallo Gunnar,

            Wobei ich nirgens gefunden hab, ob Math.random() nicht auch 1 liefern kann, dann gäb's ein Problem.

            stimmt, aber mein Testscript hat für 5 nie einen Wert ausgespuckt - ja, ich weiß man kann trotzdem nicht davon ausgehen, dass das immer so ist ...

            Was ist an den fünf _Häufigkeiten_ gleich?
            Du bekommst die gleichen _Wahrscheinlichkeiten_ für jedes Bild.

            *argh* :-)

            Grüße aus Nürnberg
            Tobias

            1. Was ist an den fünf _Häufigkeiten_ gleich?
              Du bekommst die gleichen _Wahrscheinlichkeiten_ für jedes Bild.
              *argh* :-)

              Tobias,
              Dass die Bilder gleich häufig auftreten, ist unwahrscheinlich.
              Dass die Bilder gleich wahrscheinlich auftreten, ist dagegen häufig.

              ;-)
              Gunnar

              --
              „Solang wir noch tanzen können
              und richtig echte Tränen flennen,
              ist noch alles offen,
              ist noch alles drin.“
              (Gundermann)