Bräuchte Hilfe bei Kontaktformular mit Bild

Gockel · 20.07.2023

Moin Gemeinde,

ich habe ein Kontaktformular das ein Bild mit folgendem Code anzeigt:

<img src="bild.jpg" id="bild" width="500" height="357" title="Postkarte umdrehen!" onClick="drehen(1)">

Ist es möglich das Bild per Zufallsgenerator auszuwählen (sagen wir mal Bild1 bis Bild9)?

Liebe Grüße
Jörg

Lupus · 20.07.2023

Ich habe mit der Frage "css img zufallsgenerator" bei Google jede Menge Antworten bekommen.

Gockel · 20.07.2023

Halloo Lupus,
ich auch. Aber nicht wie es danach weitergeht.
Beispiel:
<div id="ausgabe">
<script>
// Funktion zur zufälligen Auswahl eines Bildes aus einer Bildliste
var images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];
var image = images[Math.floor(Math.random() * images.length)];
document.getElementById("ausgabe").innerHTML = '<img src="' + image + '">';
</script>
</div>

Wie gehts nach '<img src="' + image + '">'; weiter?
Der Teil fehlt ja noch id="bild" width="500" height="357" title="Postkarte umdrehen!" onClick="drehen(1)">

Wenn ich die Zeile so aufbaue:

document.getElementById("ausgabe").innerHTML = '<img src="' + image + ' id="bild" width="500" height="357" title="Postkarte umdrehen!" onClick="drehen(1)">';

wird kein Bild mehr angezeigt und das onClick funktioniert auch nicht.

Liebe Grüße

Gockel · 20.07.2023

Danke, hab den Fehler gerade gefunden. So muss die Zeile aussehen

document.getElementById("ausgabe").innerHTML = '<img src="' + image + '"id="bild" width="500" height="357" title="Postkarte umdrehen!" onClick="drehen(1)">';

Lupus · 20.07.2023

Das ist übrigens die antwort von https://chat.openai.com :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Zufälliger Foto-Generator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<img id="randomImage" src="" alt="Zufälliges Foto">
<button onclick="changeImage()">Nächstes Foto</button>
</div>
<script src="script.js"></script>
</body>
</html>

CSS

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.container {
text-align: center;
}

img {
max-width: 500px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button {
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

JS
const images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
// Füge hier die Pfade zu deinen Bildern hinzu
];

function getRandomImage() {
const index = Math.floor(Math.random() * images.length);
return images[index];
}

function changeImage() {
const randomImageElement = document.getElementById('randomImage');
randomImageElement.src = getRandomImage();
}

// Beim Laden der Seite wird das erste zufällige Bild angezeigt
changeImage();

####################################################

Ersetze dabei die Bildpfade in der JavaScript-Datei mit den Pfaden deiner eigenen Bilder. Lade die Dateien in einem Ordner hoch und passe die Pfade entsprechend an.

Damit sollte die Webseite bereit sein! Beim Laden der Seite wird ein zufälliges Bild aus der Liste der Bilder angezeigt, und wenn du auf den "Nächstes Foto"-Button klickst, wird ein neues zufälliges Bild angezeigt.