Bilder "mischen" in HTML?

Hi,

wie kann ich die bilder zufällig anzeigen lassen?

Kann mir jmd ein beispiel geben wie der code aussehen muss?

So meine ich das:

Answer 1

[regex9]

Ein Beispiel mit JavaScript:

Zuerst wird ein Containerelement angelegt.

<div id="images"></div>

Im Skript wird ein Array mit allen Bildern erstellt und zufällig sortiert.

function shuffle(list) {
  for (let i = list.length - 1; i > 0; --i) {
    const place = Math.floor(Math.random() * (i + 1));
    const temp = list[i];
    list[i] = list[place];
    list[place] = temp;
  }
}
                    
let images = [
  { "alt": "Image description 1 ...", "src": "image1.jpg" },
  { "alt": "Image description 2 ...", "src": "image2.jpg" },
  { "alt": "Image description 3 ...", "src": "image3.jpg" },
  /* maybe further images ... */
];

shuffle(images);

Danach können die Elemente an den Container gehängt werden.

const container = document.getElementById("images");

for (const image of images) {
  const imageElement = document.createElement("img");
  imageElement.alt = image.alt;
  imageElement.src = image.src;
  container.appendChild(imageElement);
}

Bei dieser Lösung werden die Elemente allerdings erst nachträglich in das DOM gesetzt. Generell zu bevorzugen wäre stattdessen eine Sortierung auf Serverseite.

Answer 2

[CodeMax07]

Das musst du mit JavaScript machen.

Woher ich das weiß: Hobby – Ich programmiere seit 2 Jahren

Comments

[imstupidPlshelp]

kann ich aber noch nicht. Kannst du mir ein beispiel schicken?

Answer 3

[EvilMastermind]

Du kannst die Bilder über CSS anders anzeigen lassen, auch in anderer Reihenfolge. Wenn du die Reihenfolge zufällig haben möchtest solltest du JavaScript oder im Falle von Serverside redering von mir auch irgendeine Serverside Sprache nutzen.

HTML ist für die Struktur einer Seite da, nicht für das Desgin.

Answer 4

[whgoffline]

Mit css transforms oder über Javascript.

Woher ich das weiß: Studium / Ausbildung – Informatikstudent