Bilderwechsel nach Uhrzeit / Tageszeit?

Thema wurde von Anonymous, 11. September 2020 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.021
    Danke erhalten:
    89
    Danke vergeben:
    575
    Hallo Leute

    Ich habe eine Idee die ich gerne verwirklichen möchte.

    Dazu bräuchte ich folgende Funktion:
    Ein Bild das nach Tageszeit wechseln soll.

    Inspiriert von den MacBook Wallpapern die in 3-4 verschiedenen Tageszeiten vorliegen würde ich das gerne einbauen.

    Also z.B.
    Von 06 Uhr bis 18 Uhr Deutscher Zeit = Bild_1.jpg
    Von 18 Uhr bis 06 Uhr Deutscher Zeit = Bild_2.jpg

    Ich habe natürlich schon Google bemüht aber irgendwie nur Asbach-Uralt Einträge von 2006 / 2011 gefunden.
    Vielleicht geht das ja heute durch CSS oder andere Methoden viel einfacher als damals?

    Hat vielleicht jemand eine Idee wie ich dies bewerkstelligen könnte?

    Freundliche Grüsse und vielen Dank für eure Zeit und Mühe,
     
  2. barbara

    barbara G-WARD 2014/15/16

    Registriert seit:
    14. August 2011
    Beiträge:
    30.025
    Danke erhalten:
    9.073
    Danke vergeben:
    1.345
    Kommt darauf an was es für ein Bild sein soll, Wo es sein soll, bzw. wie es eingebunden wird.

    Ich habe bei mir z.B. eine alte Anpassung für die Begrüßung, die immer noch funktioniert. Das müsste mit einem Bild eigentlich genauso gehen.

    Das steht bei mir so im html:
    HTML:
    <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>
     
  3. IH59

    IH59 Erfahrener Benutzer

    Registriert seit:
    20. Februar 2018
    Beiträge:
    86
    Danke erhalten:
    5
    Danke vergeben:
    33
    Hallo Barbara,

    das ist eine Super Idee :)

    Wo muss ich denn das HTML Script einfügen bei GX3 in der letzten Version ?

    Gruß & schönes Wochenende

    Isabel
     
  4. barbara

    barbara G-WARD 2014/15/16

    Registriert seit:
    14. August 2011
    Beiträge:
    30.025
    Danke erhalten:
    9.073
    Danke vergeben:
    1.345
    Ich habe das im Content-Manager im index-oben
    und da im Quellcode
     
  5. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.065
    Danke erhalten:
    389
    Danke vergeben:
    68
    Man sollte aber nicht mehr mit "write" arbeiten, besser wäre es z. B. mit "getElementByID" .

    Ich habe das mal für Text und Bilder zusammengesetzt
    HTML:
    <h2 id="text_wechseln">Hallo!</h2>
    <img id="bild_wechseln" src="Bild1.png" class="img-responsive">
    <script language="JavaScript">
    <!--
    Datum = new Date();
    Stunde = Datum.getHours();
    if(Stunde > 17)
    {
    document.getElementById('text_wechseln').innerHTML = "Guten Abend!";
    document.getElementById('bild_wechseln').src = "Bild3.png";
    }
    else if(Stunde > 11)
    {
    document.getElementById('text_wechseln').innerHTML = "Guten Tag!";
    document.getElementById('bild_wechseln').src = "Bild2.png";
    }
    else if(Stunde > 0)
    {
    document.getElementById('text_wechseln').innerHTML = "Guten Morgen!";
    document.getElementById('bild_wechseln').src = "Bild1.png";
    }
    // -->
    </script>
    Der Vorteil bei dieser Methode ist, das man auch eine Anzeige hat wenn, aus welchem Grund auch immer, mal kein Javascript funktioniert, das ist bei "write" nicht so.
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    29. November 2019
    Beiträge:
    131
    Danke erhalten:
    40
    Danke vergeben:
    14
    #6 Anonymous, 12. September 2020
    Zuletzt bearbeitet: 12. September 2020
    Danke dafür, wieder was gelernt. Es geht auch über php in der html.
    @barbara kleiner Tip.
    Habe seit längeren das gleiche über php in der html eingebaut, um von Javascript etwas wegzukommen:
    HTML:
    <div class="textWelcome">
    <?php
    $tageszeit = date("H:i");
    if($tageszeit > "00:01")
    {
    $indexwrite = "Einen schönen guten Morgen,";
    }
    if($tageszeit > "09:01")
    {
    $indexwrite = "Einen schönen guten Tag,";
    }
    if($tageszeit > "16:01")
    {
    $indexwrite = "Einen schönen guten Abend,";
    }
    echo $indexwrite;
    ?>
    </div>
    
    Nachtrag:
    @DrGuu
    funktioniert auch mit Pfad zum Bild
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.021
    Danke erhalten:
    89
    Danke vergeben:
    575
    Perfekt, vielen Dank an alle! Damit werde ich am Montag mal anfangen herumzuexperimentieren :)

    Klappt das wohl auch mit Jahreszeiten und verschiedenen Bildern?
    (Sommer bild, Herbst Bild, Winter Bild usw.)