Bilder zufällig austauschen

[Deleted member 38020]

Hallo, ich soll eine Website so gestalten, dass Bilder in einem <div> durch klicken auf den Button "Zufall" zufällig ausgetauscht werden.
Die Bilder sind durchnummeriert von 1.jpg bis 7.jpg und werden über diese Schleife aufgerufen:

function vorschaub() {
  for (var i=1; i<=a; i=i+1) {
  document.write('<a href="javascript:onoff('+i+')"><img src="Bilder/'+i+'.jpg" class="vb" title="'+
  text[i-1]+'"></a>')
  }
}

Der Button ist schon angelegt:
<button type="button" class="schalter" id="zuf">Zufall</button>

Es fehlt nur noch eine entsprechende Funktion, die Zufallszahlen ermittelt, diese an die Bilder "verteilt" und die Bilder entsprechend austauscht.
Ich hoffe ihr könnt mir helfen.

 

[Deleted member 38020]

Vielen Dank erstmal, ich habe noch eine andere Frage.
Wie kann ich eine Variable x so in einen div-Container einbinden, dass jeweils nur der Eintrag angezeigt wird, den Variable i vorgibt?

<div class="bu">
<script>
for (var i=1; i<=a; i=i+1) {
document.write('<div>'+x[i-1]+'</div>');
}
</script>
</div>

Bis jetzt werden immer alle Einträge angezeigt.

 

[Deleted member 38020]

Das sind Untertitel für die Bilder. Sie stehen in einer externen Datei quelle.js mit folgendem Inhalt (die Quelle ist schon mit der HTML-Datei verknüpft):

var x = ['Hauptstr.',
'Altstadt',
'Kaufhaus',
'Markt',
'Dom',
'Post',
'Bahnhof'];

Jetzt soll die jeweilige Bildunterschrift zusammen mit dem passenden Bild angezeigt werden. Wenn ich also 1.jpg anklicke wird dieses ja im Hauptbereich groß angezeigt. Dazu soll dann die Bildunterschrift "Hauptstr." in einem anderen div stehen. Wenn ich 2.jpg anklicke soll dort Altstadt stehen usw.

Wie mache ich das?

 

[Deleted member 38020]

Dies ist der klassische Anwendungsfall für das figure-Element.

Das ist leider noch nicht ganz das was ich suche, da die div´s für die Bilderanzeige und die Untertitel bereits existieren.
Ich möchte eine JS-Methode mit der ich den i-ten Wert der Variable x auslesen und anzeigen kann.

 

[Deleted member 38020]

<div class="bu">
<figure>
<script>
for (var i=1; i<=a; i=i+1) {
document.getElementById("thecaption").textContent = text[i];
}
</script>
<figcaption id="thecaption"></figcaption>
</figure>
</div>

Soweit habe ich es jetzt eingetragen. Irgendetwas muss ich aber falsch gemacht haben. Funktioniert nämlich noch nicht.

 

[Deleted member 38020]

function vorschau() {
    document.write('<div>');
    for (var i=1; i<=a; i=i+1) {
    document.write('<div id="'+i+'"><a href="javascript:onoff('+i+')"><img src="Bilder/'+i+'.jpg" class="vb" title="'+text[i-1]+'"></a></div><div class="bu">'+text[k-1]+'</div>');
    }
    document.write('</div>');
}

Die Bilder werden in dieser Schleife erzeugt und im Vorschaubereich angezeigt. Ich habe jetzt mal das div mit hinten dran gehangen, dass die Bildunterschriften aus der Variable x entnimmt. Logischerweise wird mir im Moment nur der letzte Eintrag der Variable x angezeigt. Hier ist die Funktion, die die Bilder groß anzeigt:

function onoff(lnr) {
  nr=lnr;
  if (nr != 0) {
    document.getElementById('b0').style.display='none';
    var b = new Image();
    b.src='Bilder/'+nr+'.jpg';
    document.bild.src=b.src;
    }
    else {
    document.getElementById('b'+nr).style.display='block';
    document.bild.src="";
    }
}

Jetzt müsste ich die untere Funktion mit der oberen so verknüpfen, dass bei Öffnen des Bildes in groß (mit der unteren Fktn.) die obere eine Variable k erzeugt, die dann die Untertitel ausliest und anzeigt.