Zeitgesteuertes Bild

Fragen und Diskussionen rund um Internet, Software und PC
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Zeitgesteuertes Bild

Ungelesener Beitrag 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>
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag 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:


Code.jpg
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag 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>
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag von Tommy Herrmann »

:tu:

wie ist das denn dann mit Hintergrundbildern :confused:

background-image
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag 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.
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Zeitgesteuertes Bild

Ungelesener Beitrag von stobi_de »

Super - vielen Dank
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Zeitgesteuertes Bild

Ungelesener Beitrag 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)';

Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag 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 + ')';
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag 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>
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Zeitgesteuertes Bild

Ungelesener Beitrag 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.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag von Werner-Zenk.de »

Ich hatte da etwas mit PHP verwechselt :D

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
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag von Tommy Herrmann »

ja - jetzt geht es - danke Werner !!! :freude:

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 :lachtot:

Hier ist gerade (18:10 Uhr) tiefschwarze Nacht und es schneit :schnee:
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag 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 :D

Und in PHP funktioniert diese ähnliche Schreibweise Ab Version 8.2 nicht mehr:
"${bild}"
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag von Tommy Herrmann »

huu - dann fragen wir Dich wieder :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag 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.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Zeitgesteuertes Bild

Ungelesener Beitrag von Werner-Zenk.de »

Gefällt mir :tu:
ich sehe da keinen CSS-Fehler.
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot], Volker und 10 Gäste