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
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 anzeigen -->
<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: fixed;
/* alternativ absolute Position */
/* 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 dasselbe Skript, das ich für verschiedene Tage angepasst habe:
<!-- Skript Wechselbilder nach Tagesdaten -->
<script>
let heute = new Date();
let tag = heute.getDate();
let monat = heute.getMonth() + 1; // Monate sind 0-basiert in JavaScript
let jahr = heute.getFullYear();
let bild = `images/standard.jpg`; // Standardbild für andere Daten
// Spezifische Bilder für bestimmte Tagesdaten
if (tag === 1 && monat === 11 && jahr === 2024) bild = `images/bild1.jpg`;
if (tag === 10 && monat === 11 && jahr === 2024) bild = `images/bild2.jpg`;
if (tag === 15 && monat === 11 && jahr === 2024) bild = `images/bild3.jpg`;
if (tag === 24 && monat === 12 && jahr === 2024) bild = `images/bild4.jpg`;
document.getElementById("bild").style = `background-image: url(${bild})`;
</script>
Möchtet ihr, dass die Bilder jedes Jahr an denselben Tagen angezeigt werden, lasst einfach die Jahresangabe im Skript weg:
<!-- Skript Wechselbilder nach Tagesdaten jährlich wiederkehrend -->
<script>
let heute = new Date();
let tag = heute.getDate();
let monat = heute.getMonth() + 1; // Monate sind 0-basiert in JavaScript
let jahr = heute.getFullYear();
let bild = `images/standard.jpg`; // Standardbild für andere Daten
// Spezifische Bilder für bestimmte Tagesdaten, unabhängig vom Jahr
if (tag === 1 && monat === 11) bild = `images/bild1.jpg`;
if (tag === 10 && monat === 11) bild = `images/bild2.jpg`;
if (tag === 15 && monat === 11) bild = `images/bild3.jpg`;
if (tag === 24 && monat === 12) bild = `images/bild4.jpg`;
document.getElementById("bild").style = `background-image: url(${bild})`;
</script>
Hier ist das Skript, das innerhalb jeder Stunde alle 15 Minuten zwischen vier verschiedenen Bildern wechselt:
<!-- Skript für den Wechsel von Bildern alle 15 Minuten, wiederkehrend nach 1 Stunde -->
<script>
let heute = new Date();
let stunde = heute.getHours();
let minuten = heute.getMinutes();
let bild = `images/standard.jpg`; // Standardbild, falls nichts passt
// Auswahl des Bildes basierend auf der aktuellen Viertelstunde
if (minuten >= 0 && minuten < 15) bild = `images/bild1.jpg`;
else if (minuten >= 15 && minuten < 30) bild = `images/bild2.jpg`;
else if (minuten >= 30 && minuten < 45) bild = `images/bild3.jpg`;
else if (minuten >= 45 && minuten < 60) bild = `images/bild4.jpg`;
document.getElementById("bild").style = `background-image: url(${bild})`;
</script>
Hier noch eine weitere Alternative mit dem Wechsel der Bilder zu den vier Jahreszeiten.
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
Dieses Beispiel dient lediglich als alternative Schreibweise und zeigt, wie man eine Style-Anweisung direkt im JavaScript unterbringen kann. Der Einbau bleibt im Wesentlichen unverändert, wie bereits zuvor beschrieben; jedoch habe ich in diesem Fall die CSS für die Hintergrundbilder direkt im JavaScript integriert.
Die fixierte Positionierung eignet sich ausschließlich für den Header-Bereich, da das Bild ohne Positionsangabe immer ganz oben platziert wird. Für Inhalte an anderen Stellen auf der Seite sollte stattdessen eine absolute CSS-Positionierung verwendet werden, denn ein fixiert positioniertes Element wird relativ zum Ansichtsfenster oder zum Browserfenster selbst positioniert.
<!-- 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: fixed;
z-index: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center center;
}