Bild wechsel mit Javascript?
Hey,
ich hab da eine Frage zum Thema Javascript. Undzwar möchte ich das sich mit jedem Reload ein Bild ändert (am besten random aus einer "Bildliste" ausgesucht).
Das hier ist der Code den ich derzeit versucht habe... allerdings kommt immer wieder der Fehler das er die Bilder nicht finden konnte...
var imagenumber = 3 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "bild1.png"
images[2] = "bild2.png"
images[3] = "bild3.png"
var image = images[rand1]
document.write('<IMG SRC="' + image + '">')
Wäre nett wenn mir jemand mit dem Problem helfen könnte.
2 Antworten
1.Stelle sicher, dass die Bilder (bild1.png, etc.) im richtigen Verzeichnis sind. Wenn nicht, musst du die URL anpassen, z. B.
<img src="resources/images/bild1.png">
2.Das Generieren der Zufallszahl funktioniert nicht, wenn du nicht rundest. Math.random() generiert schließlich eine lange Kommazahl. Für eine natürliche Zahl zwischen 1 und 3 kannst du folgenden Code verwenden:
var rand = 1 + (Math.random() * 3) | 0;
Hinweis: Das " | 0 " am Ende rundet ab. Stattdessen kann auch Math.floor() verwendet werden.
3.Verwende NICHT document.write()! Wenn du kein 30 Jahre altes Online-Tutorial verwendet hast, wurdest du sicher bereits darauf hingewiesen, dass document.write() unter allen Umständen vermieden werden sollte. Setze stattdessen eine ID in deiner Website, z.B.
<div id="random-image-container"></div>
In einem <script> am Ende deines <body>-Elements kannst du das Element folgendermaßen auswählen und das Bild einfügen:
var imgDiv = document.getElementById("random-image-container");
imgDiv.innerHTML = "<img src='bild" + rand + ".png'>";
oder, falls du jQuery verwendest:
var imgDiv = $("#random-image-container");
imgDiv.html("<img src='bild" + rand + ".png'>");
4.Jedes Bild sollte ein alt-Attribut haben, das das Bild beschreibt! Beispiel:
<img src="bild1.png" alt="Kohlenstoffkreislauf">
Der Grund hierfür ist, dass zum Beispiel auch Blinde und Sehbehinderte im Web surfen wollen, und die können Bilder nicht sehen, sie können sich aber die im alt-Attribut gespeicherte Beschreibung vorlesen lassen.
var image = images[Math.floor(Math.random()*images.length)];
images = [];
images.push("bild1.png");
images.push("bild2.png");
images.push("bild3.png");
var image = images[Math.floor(Math.random()*images.length)];
document.write("<img src=" + image + "/>");
Danke für die schnelle antwort. Allerdings besteht der Fehler das er die Bilder nicht anzeigen kann.