Zufallsbilder

[macangelo]

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

[N2O]

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

[Tobias Kloth]

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

[Gunnar Bittersmann]

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

[Gunnar Bittersmann]

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.

[Tobias Kloth]

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

[Tobias Kloth]

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

[Gunnar Bittersmann]

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

[Tobias Kloth]

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

[Gunnar Bittersmann]

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

[Tobias Kloth]

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

[Gunnar Bittersmann]

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