Seite 1 von 1
Zeitgesteuertes Bild
Verfasst: Mi 30. Nov 2022, 15:40
von stobi_de
Ein Kunde will ein Zeitgesteuertes Hintergrundbild haben (das Hausprojekt: ein Tagbild und ein Abendbild)
Hat jemand das hier schon gemacht?
Sollte ja nicht zu schwierig sein, so in der Art:
Code: Alles auswählen
<script language="JavaScript">
<!--
Datum = new Date();
Stunde = Datum.getHours();
if(Stunde > 17)
{
document.write("<h2>Guten Abend!</h2>");
}
else if(Stunde > 11)
{
document.write("<h2>Guten Tag!</h2>");
}
else if(Stunde > 0)
{
document.write("<h2>Guten Morgen!</h2>");
}
// -->
</script>
Re: Zeitgesteuertes Bild
Verfasst: Mi 30. Nov 2022, 15:52
von Tommy Herrmann
Moin,
Werner hat da was in PHP:
https://werner-zenk.de/scripte/berechnu ... hselbilder
... wie z.B.:
Code: Alles auswählen
<?php
// Bilder je nach Tageszeit
$stunde = date("G");
if ($stunde < 12 && $stunde >= 0) $bild = '<img src="morgens.jpg">';
if ($stunde <= 18 && $stunde >= 12) $bild = '<img src="mittags.jpg">';
if ($stunde >= 19) $bild = '<img src="abends.jpg">';
echo $bild;
?>
P.S.:
bist Du so lieb und packst Code bitte möglichst im Editor vom Forum auch mit dem
BBCode am Button
</> ein. Ich habe das jetzt in Deinem Beitrag oben nachgeholt:
Re: Zeitgesteuertes Bild
Verfasst: Mi 30. Nov 2022, 16:23
von Werner-Zenk.de
Mit JavaScript:
Code: Alles auswählen
<div id="bild"></div>
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild = `<img src="morgens.jpg">`;
if (stunde < 12 && stunde >= 0) bild = `<img src="morgens.jpg">`;
if (stunde <= 18 && stunde >= 12) bild = `<img src="mittags.jpg">`;
if (stunde >= 19) bild = `<img src="abends.jpg">`;
document.getElementById("bild").innerHTML = bild;
</script>
Re: Zeitgesteuertes Bild
Verfasst: Mi 30. Nov 2022, 16:39
von Tommy Herrmann
wie ist das denn dann mit Hintergrundbildern
background-image
Re: Zeitgesteuertes Bild
Verfasst: Mi 30. Nov 2022, 17:51
von Werner-Zenk.de
Code: Alles auswählen
<div id="bild"></div>
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild = `morgens.jpg`;
if (stunde < 12 && stunde >= 0) bild = `morgens.jpg`;
if (stunde <= 18 && stunde >= 12) bild = `mittags.jpg`;
if (stunde >= 19) bild = `abends.jpg`;
document.getElementById("bild").style.backgroundImage = `url($bild)`;
</script>
Damit man auch die Bilder sieht, muss die Größe mit CSS gesetzt werden:
Code: Alles auswählen
<style>
div#bild {
width: 500px;
height: 300px;
border: Solid 2px royalblue;
background-size: cover;
}
</style>
@stobi
document.write() sollte man nicht mehr verwenden.
Re: Zeitgesteuertes Bild
Verfasst: Mi 30. Nov 2022, 18:13
von stobi_de
Super - vielen Dank
Re: Zeitgesteuertes Bild
Verfasst: Mi 30. Nov 2022, 20:19
von stobi_de
So geht es
Code: Alles auswählen
document.getElementById("Header-Teil-1").style.backgroundImage ="url('assets/images/villa-head-tag-1.jpg')";
so nicht, mit Parameter....
Code: Alles auswählen
document.getElementById("Header-Teil-1").style.backgroundImage = 'url(bild)';
document.getElementById("Header-Teil-1").style.backgroundImage = 'url($bild)';
Re: Zeitgesteuertes Bild
Verfasst: Mi 30. Nov 2022, 22:02
von Werner-Zenk.de
Code: Alles auswählen
let bild = "assets/images/villa-head-tag-1.jpg";
document.getElementById("Header-Teil-1").style.backgroundImage = 'url($bild)'; // Funktioniert nicht!
document.getElementById("Header-Teil-1").style.backgroundImage = `url($bild)`; // Funktioniert
Der Unterschied liegt in den Anführungszeichen,
' = Einfache Anführungszeichen,
` = Template-Zeichen, diese erzeugt man mit der Umschalt + Apostroph-Taste
Alternativ kannst du auch folgendes verwenden:
Code: Alles auswählen
let bild = "assets/images/villa-head-tag-1.jpg";
document.getElementById("Header-Teil-1").style.backgroundImage = 'url(' + bild + ')';
Re: Zeitgesteuertes Bild
Verfasst: Do 1. Dez 2022, 08:19
von Tommy Herrmann
Moin Werner,
mich hat das jetzt auch interessiert und ich habe es hier mal "erfolglos" getestet.
Da ich keine Ahnung von JavaScript habe, bräuchte ich nochmals Deine Hilfe.
Ich habe das (fast) 1:1 übernommen und diese Seite zum Testen händisch erstellt (wird wieder gelöscht):
https://www.mobirise-tutorials.com/Test ... ilder.html
Hier mein gesamter Code:
Code: Alles auswählen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Bildwechsel Beispiel Mobirise-Tutorials.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div#bild {
width: 1900px;
height: 1000px;
border: Solid 2px royalblue;
background-size: cover;
}
</style>
</head>
<body>
<h3>Wechselbild-Test</h3>
<!-- zeitgesteuerte Bilder von Werner-Zenk.de -->
<div id="bild"></div>
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild = `morgens.jpg`;
if (stunde < 12 && stunde >= 0) bild = `morgens.jpg`;
if (stunde <= 18 && stunde >= 12) bild = `mittags.jpg`;
if (stunde >= 19) bild = `abends.jpg`;
document.getElementById("bild").style.backgroundImage = `url($bild)`;
</script>
</body>
</html>
Re: Zeitgesteuertes Bild
Verfasst: Do 1. Dez 2022, 10:17
von stobi_de
Moin Werner
Also so klappt es
Code: Alles auswählen
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild="assets/images/villa-head-tag-1.jpg";
if (stunde >= 0 && stunde <= 6){
document.getElementById("Header-Teil-1").style.backgroundImage = "url(assets/images/villa-head-abend-1.jpg)";
document.getElementById("Header-Teil-2").style.backgroundImage = "url(assets/images/villa-head-abend-1.jpg)";
document.getElementById("Header-Teil-3").style.backgroundImage = "url(assets/images/villa-head-abend-1.jpg)";
}
else if (stunde >= 7 && stunde <= 18){
document.getElementById("Header-Teil-1").style.backgroundImage = "url(assets/images/villa-head-tag-1.jpg)";
document.getElementById("Header-Teil-2").style.backgroundImage = "url(assets/images/villa-head-tag-1.jpg)";
document.getElementById("Header-Teil-3").style.backgroundImage = "url(assets/images/villa-head-tag-1.jpg)";
}
else if (stunde >= 19 && stunde <= 24){
document.getElementById("Header-Teil-1").style.backgroundImage = "url(assets/images/villa-head-abend-1.jpg)";
document.getElementById("Header-Teil-2").style.backgroundImage = "url(assets/images/villa-head-abend-1.jpg)";
document.getElementById("Header-Teil-3").style.backgroundImage = "url(assets/images/villa-head-abend-1.jpg)";
}
</script>
so klappt es nicht (mit Shift - Apostroph , Taste neben Backspace)
Code: Alles auswählen
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild="assets/images/villa-head-tag-1.jpg";
if (stunde >= 0 && stunde <= 6){
let bild="assets/images/villa-head-abend-1.jpg";
}
else if (stunde >= 7 && stunde <= 18){
let bild="assets/images/villa-head-tag-1.jpg";
}
else if (stunde >= 19 && stunde <= 24){
let bild="assets/images/villa-head-abend-1.jpg";
}
document.getElementById("Header-Teil-1").style.backgroundImage = `url(`bild`)`;
document.getElementById("Header-Teil-2").style.backgroundImage = `url(`bild`)`;
document.getElementById("Header-Teil-3").style.backgroundImage = `url(`bild`)`;
</script>
Auch nicht mit Hochkomma (Taste Shift-#)
Code: Alles auswählen
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild="assets/images/villa-head-tag-1.jpg";
if (stunde >= 0 && stunde <= 6){
let bild="assets/images/villa-head-abend-1.jpg";
}
else if (stunde >= 7 && stunde <= 18){
let bild="assets/images/villa-head-tag-1.jpg";
}
else if (stunde >= 19 && stunde <= 24){
let bild="assets/images/villa-head-abend-1.jpg";
}
document.getElementById("Header-Teil-1").style.backgroundImage = 'url('bild')';
document.getElementById("Header-Teil-2").style.backgroundImage = 'url('bild')';
document.getElementById("Header-Teil-3").style.backgroundImage = 'url('bild')';
</script>
So ist es komplett falsch, das JS wird gar nicht ausgeführt (auch nicht mit 'url("bild")';
Code: Alles auswählen
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild="assets/images/villa-head-tag-1.jpg";
if (stunde >= 0 && stunde <= 6){
let bild="assets/images/villa-head-abend-1.jpg";
}
else if (stunde >= 7 && stunde <= 18){
let bild="assets/images/villa-head-tag-1.jpg";
}
else if (stunde >= 19 && stunde <= 24){
let bild="assets/images/villa-head-abend-1.jpg";
}
document.getElementById("Header-Teil-1").style.backgroundImage = "url('bild')";
document.getElementById("Header-Teil-2").style.backgroundImage = "url('bild')";
document.getElementById("Header-Teil-3").style.backgroundImage = "url('bild')";
</script>
Das scheint jetzt kein Mobi-Special zu sein. Ich habe es auch zu Fuß geändert.
Re: Zeitgesteuertes Bild
Verfasst: Do 1. Dez 2022, 17:51
von Werner-Zenk.de
Ich hatte da etwas mit PHP verwechselt
Code: Alles auswählen
<style>
div#bild {
width: 500px;
height: 300px;
border: Solid 2px royalblue;
background-size: cover;
}
</style>
<div id="bild"></div>
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild = `morgens.jpg`;
if (stunde < 12 && stunde >= 0) bild = `morgens.jpg`;
if (stunde <= 18 && stunde >= 12) bild = `mittags.jpg`;
if (stunde >= 19) bild = `abends.jpg`;
document.getElementById("bild").style.backgroundImage = `url(${bild})`;
</script>
Also bei:
document.getElementById("bild").style.backgroundImage = `url(${bild})`;
Müssen geschweifte Klammern hinzugefügt werden!
Siehe:
https://werner-zenk.de/test/zeitbild/eins.php
Re: Zeitgesteuertes Bild
Verfasst: Do 1. Dez 2022, 18:03
von Tommy Herrmann
ja - jetzt geht es - danke Werner !!!
Das ist der Übeltäter gewesen - so muss es sein:
`url(${bild})`;
Warum geht das nicht mit width:100%
https://www.mobirise-tutorials.com/Test ... ilder.html
So geht das jetzt bei mir. Diese Seite zum Testen wird wieder gelöscht. Ich werde morgen mal probieren das in Mobirise einzubauen ....
Code: Alles auswählen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Bildwechsel Beispiel Mobirise-Tutorials.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div#bild {
width: 1900px;
height: 1000px;
max-width: 100%;
background-size: cover;
}
</style>
</head>
<body>
<h3>Wechselbild-Test</h3>
<!-- zeitgesteuerte Bilder von Werner-Zenk.de -->
<div id="bild"></div>
<script>
let heute = new Date();
let stunde = heute.getHours();
let bild = `morgens.jpg`;
if (stunde < 12 && stunde >= 0) bild = `morgens.jpg`;
if (stunde <= 18 && stunde >= 12) bild = `mittags.jpg`;
if (stunde >= 19) bild = `abends.jpg`;
document.getElementById("bild").style.backgroundImage = `url(${bild})`;
</script>
</body>
</html>
... ab 19:00 Uhr müsste dann das Bild vom Sonnenuntergang angezeigt werden - ich glaube wir müssen die Zeiten noch der Jahreszeit anpassen
Hier ist gerade (18:10 Uhr) tiefschwarze Nacht und es schneit
Re: Zeitgesteuertes Bild
Verfasst: Do 1. Dez 2022, 18:42
von Werner-Zenk.de
Dann hole mal schnell den Schneeschieber aus der Garage damit du morgen aus dem Haus kannst um den Schnee wegzuräumen
Und in PHP funktioniert diese ähnliche Schreibweise Ab Version 8.2 nicht mehr:
"${bild}"
Re: Zeitgesteuertes Bild
Verfasst: Do 1. Dez 2022, 19:01
von Tommy Herrmann
huu - dann fragen wir Dich wieder
Re: Zeitgesteuertes Bild
Verfasst: Fr 2. Dez 2022, 07:54
von Tommy Herrmann
Moin,
habe das Skript vom Werner mit den Wechselbildern nach Zeit jetzt in Mobirise eingebaut.
Das habe ich noch allerhand CSS dazu packen müssen, da es sonst nicht richtig funktioniert.
https://www.mobirise-tutorials.com/Tuto ... ilder.html
Mit der CSS habe ich mich ein wenig "schwer getan". Vielleicht könnt ihr mal gucken ob alles richtig ist.
Re: Zeitgesteuertes Bild
Verfasst: Fr 2. Dez 2022, 20:40
von Werner-Zenk.de
Gefällt mir
ich sehe da keinen CSS-Fehler.