Quellcode im Code Editor
Nach Tageszeit wechselnde Bilder
Wechsel um 4:00 Uhr, 10:00 Uhr - 6 Bilder, 16:00 Uhr und 22:00 Uhr
Tutorial der Wechselbilder
Ansicht aller hier erscheinenden Bilder
Translate this page
Nach einem JavaScript von Werner-Zenk.de.
Ich habe hier einen einfachen Textblock aus der Rubrik "Artikel" verwendet und den oberen Teil mit den Mobirise-Parametern sowie das äußere <section> Tag </section> erhalten. Den Rest des ursprünglichen Quelltextes von Mobirise habe ich mit diesem HTML-Code im "Code Editor" ersetzt, siehe auch meinen Screenshot unten.
Das hier rot markierte <div> mit der id="bild" spricht das JavaScript an:
<!-- Start HTML für Hintergrundbild -->
<header>
<!-- Dieses <div> erzeugt das transparente Overlay, das man in der CSS modifizieren kann -->
<div class="overlay"></div>
<!-- zeitgesteuerte Bilder von Werner-Zenk.de -->
<div id="bild"></div>
<!-- Dies ist der Inhalt im Header, der dann auch mit Mobirise modifiziert werden kann -->
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-2">Hintergrund Bilder</h1>
<p class="lead mb-0"><br><br>Nach Tageszeit wechselnde Bilder</p>
</div>
</div>
</div>
</header>
<!-- Ende HTML für Hintergrundbild -->
Hier meine hier angewendete CSS, die in den Bereich "CSS Editor" vom "Code Editor" des Blocks gehört:
header {
position: relative;
background-color: black;
height: 100vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header #bild {
position: absolute;
z-index: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center center;
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.1;
z-index: 1;
}
Hier das JavaScript von Werner-Zenk.de, das in die Seiteneinstellungen in den Bereich "End of <body> Code" gehört. Das Skript bezieht sich auf die id="bild", die im Block-Code oben rot markiert ist. Ich habe hier 4 Bereiche von je 6 Stunden definiert und dann jedem Bereich ein anderes Hintergrundbild gegeben.
Natürlich könntet ihr hier auch andere Stundenzeiten eintragen oder auch weitere Zeiten in vollen Stunden definieren, so zeige ich zum Beispiel hier zwischen 10:00 Uhr und 16:00 Uhr jede Stunde ein anderes Hintergrundbild.
Diese Bilder habe ich zuvor in ein von mir erstelltes Verzeichnis "images", in den Ordner meiner lokalen Publizierung und auf den Server kopiert. Die Bilder sind also erst nach der Publizierung zu sehen und nicht bereits auf der Arbeitsseite von Mobirise.
<!-- Skript Wechselbilder -->
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild = `images/nachts.jpg`;
if (stunde >= 22 && stunde <= 3) bild = `images/nachts.jpg`;
if (stunde >= 4 && stunde <= 9) bild = `images/morgens.jpg`;
if (stunde >= 10 && stunde <= 15) bild = `images/mittags.jpg`;
if (stunde >= 16 && stunde <= 21) bild = `images/abends.jpg`;
document.getElementById("bild").style = `background-image: url(${bild})`;
</script>
Unten noch ein Screenshot vom "Code Editor":
Quellcode im Code Editor
Diese Bilder erscheinen bei mir zusätzlich jede volle Stunde um 11:00, 12:00, 13:00, 14:00 und 15:00 Uhr
