Grafik stündlich wechseln lassen

Mit Hilfe eines kleinen JavaScripts ist es möglich, dass du auf deiner Website eine Grafik stündlich wechseln lassen kannst. Es gibt dabei viele Möglichkeiten, wie du so etwas einsetzen könntest. Du könntest bspw. das Script dazu benutzen, das Design deiner Website aufzupeppen. So wäre es möglich, einen Mond oder eine Sonne je nach Tageszeit wandern zu lassen.

In diesem Artikel zeige ich dir, wie das funktioniert.

Alles, was du dafür benötigst, sind insgesamt 24 Grafiken und das folgende JavaScript.

Mit JavaScript eine Grafik stündlich wechseln lassen

Mit dem nachstehenden JavaScript kannst du auf deiner Website die Grafik stündlich wechseln lassen.

Es gibt dabei mehrere Teile, die du dazu in deine Website einbauen musst. Zunächst natürlich das Script an sich. Dies kommt dabei in den Header des HTML Dokuments. Weiterhin musst du das Script beim Laden der Seite ausführen lassen. Dies geschieht über den Befehl body onload. Danach musst du noch definieren, wo das Bild auf der Website erscheinen soll.

Das folgende Beispiel zeigt dabei eine Möglichkeit, wie du das Script in deine Website einbauen kannst.


Beispiel:

<html>
 <head>
 <script language="JavaScript">
 <!--
 
 var Dateiname = "grafik";
 var Dateiendung = ".jpg";
 
 function BildAnzeigen()
 {
     var Datum = new Date();
     var Stunde = Datum.getHours();
 
     document.getElementById("Bild").src = Dateiname+Stunde+Dateiendung;
 }
 
 //-->
 </script>
 <title>Grafik stündlich wechseln lassen</title>
 </head>
 <body onload="BildAnzeigen();">
 
 <img id="Bild" src="grafik0.jpg">
 
 </body>
</html>

Erklärung:

Um 0:00 Uhr zeigt dieses JavaScript dementsprechend die Grafik mit dem Namen grafik0.jpg an. Um 12:00 Uhr zeigt es hingegen die Grafik grafik12.jpg auf der Website an.

Damit das oben genannte JavaScript funktioniert, musst du nun nur noch deine Grafiken nach dem festgelegten Schema benennen. Übernimmst du das Snippet 1:1 beginnt jede Datei mit dem Namen „grafik“. Direkt danach fügst du die Stunde ein, zu der die Grafik erscheinen soll. Also 0 für 00:00 Uhr, 12 für 12:00 Uhr usw. Das Dateiformat aus dem Beispiel ist JPG.

Du kannst die Variablen des Namens und des Formats dabei natürlich an deine Bedürfnisse anpassen.