Zufallsbilder ausgeben

susiH · 17.09.2014

Hallo, ich habe folgenden Code im Netz gefunden, um ein Zufallsbild mit Link ausgeben zu lassen.

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

</script>

Der funktioniert auch super. Nur das Problem ist, dass ich gerne 6 Bilder ausgeben lassen möchte.
Kann mir jemand sagen, was ich dazu am Code ändern muss?

leveler · 17.09.2014

Im Code gibt es 2 Codeblöcke in denen 4 Objekte (link & image) deklariert werden. Also solltest Du die jeweils um 2 erweitern.

susiH · 17.09.2014

Das hab ich ja gemacht. Ich glaub ich hab mich nicht richtig ausgedrückt. Der Code gibt nur ein Bild aus. Ich habe aber 18 Bilder von denen 6 ausgegeben werden sollen. Aktuell wird nur 1 von 18 ausgegeben

Myhar · 17.09.2014

Spezifiere erst einmal deine Anforderungen.
Möchtest du kein Bild doppelt ausgeben lassen?
Falls nein, dann erweitere einfach die Blöcke mit den Links und den Bildern entsprechend, dass es 18 Stück sind und dann in dem "ab hier nichts mehr ändern" Teil kopierst du die document.write Zeile einfach 3 mal (so, dass sie insgesamt 4 mal vorhanden ist)

susiH · 17.09.2014

Also ich möchte von 18 Bildern, die ich oben bei den Codeteil Bilder eingetragen und bei Link den Link eingetragen hab, insgesamt 6 ausgeben lassen. Davon soll keins doppelt auftauchen. Wenn ich die document.write-Zeile kopiere, wird immer das gleiche Bild ausgegeben.

RehW · 17.09.2014

susiH schrieb:
Wenn ich die document.write-Zeile kopiere, wird immer das gleiche Bild ausgegeben.

Ist ja auch richtig so, da der Wert "ran" sich nicht ändert. Also die Zeilen davor mit kopieren. Um doppelte Bilder zu vermeiden sollte der Wert "ran" zwischengespeichert werden. Danach bei jeden neuen Aufruf nachsehen ob der Wert schon vorhanden ist und falls ja einen neuen berechnen lassen.

Duddle · 18.09.2014

Dein gefundenes Script ist nicht der richtige Ansatz für "Zufall ohne Wiederholungen". Folgendes funktioniert:

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <title></title>
  </head>
  <body>
   <script type="text/javascript">
    //+ Jonas Raoni Soares Silva
    //@ http://jsfromhell.com/array/shuffle [v1.0]
    function shuffle(o){ //v1.0
     for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
     return o;
    };

    var elemente = new Array();
    elemente[0] = ['./GrafikAus1.gif', './1.htm'];
    elemente[1] = ['./GrafikAus2.gif', './2.htm'];
    elemente[2] = ['./GrafikAus3.gif', './3.htm'];
    elemente[3] = ['./GrafikAus4.gif', './4.htm'];

    var zufall = shuffle(elemente);
    var wieviele = 2;

    for(var i = 0; i < wieviele; i++) {
      document.write('<a href="' + zufall[i][1] + '"><img src="' + zufall[i][0] + '" border="0" /></a>');
    }
   </script>
  </body>
</html>

Hier werden 2 Zufallslinks/-bilder ausgegeben. Das wieviele setzt diese Zahl.

Duddle

Curanai · 19.09.2014

Der shuffle() ist großartig, aber dafür zwei andere Anmerkungen von mir:

[ 1 ] "var elemente = [];" statt mit "new Array()" (weil's intern schneller geht)
[ 2 ] DOM-Modifikation in einer Schleife ist übel - lieber als String vorbereiten und einmal ins DOM.

Code:

var zufall = shuffle(elemente),
   wieviele = 2,
   ausgabe = '';

for(var i = 0; i < wieviele; i++) {
   ausgabe += '<a href="' + zufall[i][1] + '"><img src="' + zufall[i][0] + '" border="0" /></a>';
}

document.write(ausgabe);

susiH · 19.09.2014

Ich danke euch. So funktioniert es wunderbar

susiH · 22.09.2014

Ich hab doch noch eine Frage dazu....
Wenn ich bei manchen Bildern keinen Link habe, wie kann ich das dann schreiben?

Code:

   <script type="text/javascript">
    //+ Jonas Raoni Soares Silva
    //@ http://jsfromhell.com/array/shuffle [v1.0]
    function shuffle(o){ //v1.0
     for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
     return o;
    };

    var elemente = new Array();
    elemente[0] = ['./GrafikAus1.gif', './1.htm'];
    elemente[1] = ['./GrafikAus2.gif', './2.htm'];
    elemente[2] = ['./GrafikAus3.gif', './3.htm'];
    elemente[3] = ['./GrafikAus4.gif', './4.htm'];

    var zufall = shuffle(elemente);
    var wieviele = 2;

    for(var i = 0; i < wieviele; i++) {
      document.write('<a href="' + zufall[i][1] + '"><img src="' + zufall[i][0] + '" border="0" /></a>');
    }
   </script>

Wenn ich bei manchen Bildern also keinen Link einsetze, soll auch nur das Bild auf die Webseite...

Curanai · 22.09.2014

"javascript:" - bitte kein "#"!

Myhar · 22.09.2014

Es wäre wünschenswert, wenn von Beginn an alle Anforderungen bekannt sind. Idealerweise wird, wenn kein Link vorhanden ist, auch kein Link ausgegeben sondern lediglich das Bild. Wenn man es "schön" programmieren will, müsste man den Code umschreiben (bzw. hätte ihn erst gar nicht so geschrieben, wenn die Anforderung von Beginn an klar gewesen wäre)
Um aber Curanais Hinweis weiter auszuführen,

susiH · 22.09.2014

Das hat sich jetzt leider erst im Entstehungsprozess ergeben...

Mit javascript:void(0) funktioniert es auch gut, so dass kein Link aufgerufen wird.

Aber jetzt hab ich schon wieder eine Frage: Wie integriere ich ein target blank?

Wenn ich das mit in diese document write Zeile eintrage funktoniert das bei Bildern mit Link.
document.write('<div class="c2"><a href="' + zufall[1] + '"><img src="' + zufall[0] + '" border="0" /></a></div>');

Bei Bildern mit javascript void wird trotzdem ein neuer Tab aufgemacht

Curanai · 23.09.2014

Spätestens jetzt gebe ich Myhar mal wieder recht: Das kommt als Abhängigkeit bzw. Bedingung zu spät. Um es also weiterhin ein wenig dreckig zu halten:

Code:

var targetMode  = '',
   href     = zufall[1];

targetMode = (href.length != 'javascript:' ? ' target="_blank"' : '');
  
document.write('<div class="c2"><a href="' + zufall[1] + '"'+targetMode+'><img src="' + zufall[0] + '" border="0" /></a></div>');

Das ist nicht schön - dürfte aber funktionieren.

EDIT: Und dann erinnere ich Dich nochmal an Posting #8, Punkt 2 (DOM-Hinweis)! Ich habe es 1:1 adapatiert - würde es aber so nicht verwenden!