Hallo Zusammen,
ich benötige mal eure Hilfe. Folgende Anforderung:
Bitte schreibe mir ein Script in in Javascript. Es gibt drei Button. Jeder dieser Buttongreift auf Bild 4 zu. Beim Klick auf den ersten Button soll Bild 4 für 5 sekunden lang in Bild 1 geändert werden. Danach wird wieder Bild 4 angezeigt. Beim Klick auf den zweiten Button soll Bild 4 für 5 sekunden lang in Bild 2 geändert werden. Beim Klick auf den dritten Button soll Bild 4 für 5 sekunden lang in Bild 3 geändert werden. Die Buttons zum ändern der Bilder sind auf Website 1. Auf Website 2 werden dann die geänderten Bilder angezeigt.
Website 1 ist unter http://www.sammel-kiste.de)ABC/website1.html zu finden und Website 2 ist unter http://www.sammel-kiste.de/ABC/website2.html zu finden. Beide Seiten liegen auf dem gleichen Server und innerhalb des gleichen Ordners.
Ich habe was überlegt, aber es funktioniert nicht. Ich weiß nicht ob es an den Pfaden liegt oder ob der Server einfach das Senden von Informationen nicht zulässt Was sagt ihr wo das Problem liegt?
Website 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website 1</title>
</head>
<body>
Website 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website 2</title>
</head>
<body>
<!-- Ein Bild, das sich ändert -->
<img id="gifImage" src="bild4.gif" alt="Bild 4">
<script>
// Bild-Element holen
const gifImage = document.getElementById("gifImage");
// Nachrichten-Event Listener
window.addEventListener("message", function(event) {
if (event.origin === "https://www.sammel-kiste.de") {
const { newImage } = event.data;
gifImage.src = newImage;
// Nach 5 Sekunden das Bild auf bild4.gif zurücksetzen
setTimeout(function() {
gifImage.src = "bild4.gif";
}, 5000);
}
});
</script>
</body>
</html>
<!-- Drei Buttons -->
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<script>
// Button-Elemente holen
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
const button3 = document.getElementById("button3");
// Event Listener für die Buttons
button1.addEventListener("click", function() {
changeImageOnWebsite2("bild1.gif");
});
button2.addEventListener("click", function() {
changeImageOnWebsite2("bild2.gif");
});
button3.addEventListener("click", function() {
changeImageOnWebsite2("bild3.gif");
});
// Funktion zum Ändern des Bilds auf Website 2
function changeImageOnWebsite2(newImage) {
// Nachricht an Website 2 senden
window.parent.postMessage({ newImage }, "https://www.sammel-kiste.de/ABC");
}
</script>
</body>
</html>
Website 2: