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.
Die Ansicht mit dem fixierten Hintergrund benötigt eine andere CSS, die ich inzwischen hier eingebaut habe. Dieses CSS wird auch am IPhone funktionieren.
Das ist bei einem fixierten Hintergrundbild am IPhone sonst ein Problem, denn "background-attachment: fixed" funktioniert auf iOS Safari nicht. Dieses Tutorial behält aber für das normale, nicht fixierte Hintergrundbild, seine volle Gültigkeit.
Wer ein fixiertes Hintergrundbild will, liest bitte auch ganz unten meine zusätzlichen Anleitungen .
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 -->
Meine hier angewendete CSS, die in den Bereich "CSS Editor" vom "Code Editor" des Blocks gehört. Wenn ihr auf der Arbeitsseite von Mobirise lieber ein Bild anzeigen wollt, was dann auch gleich all "Fallback-Image" funktioniert, dann schreibt doch die URL zu dem Bild hinein - anstelle von:background-color: black;
Entfernt hierzu am Code für das Background-Image diese Kommentar-Zeichen:
/* Kommentar Zeichen */
header {
position: relative;
background-color: black;
/* alternativ Background-Image */
/* background-image: url(https://www.mobirise-tutorials.com/Tutorials/images/nachts.jpg); */
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
Hier ein zusätzliches Beispiel mit nur einem fixierten Hintergrundbild - ohne JavaScript für mehrere Bilder.
Der Einbau bleibt im Prinzip genauso wie bereits oben beschrieben, nur habe ich hier die CSS für die Hintergrundbilder diesmal direkt an das JavaScript mit ran geschrieben.
<!-- 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});
content: ' ';
display: block;
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: 0;
`;
</script>
Dementsprechend lasst ihr den Selector für das Bild: header #bild in der CSS für den Block oben ganz weg.
header #bild {
position: absolute;
z-index: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center center;
}