 Grafik Tag / Nacht
Sie möchten abhängig von der Uhrzeit eine von zwei Grafiken (Tag oder Nacht) anzeigen lassen. Die gewählte Grafik soll durch die aktuelle Uhrzeit bestimmt werden.
|
|
uhrzeitabhängige Bildanzeige Tag / Nacht - Version 02
Während des Tages soll ein Bild für den Tag, während der Nachtstunden ein Bild für die Nacht angezeigt werden.
Anders als in meinem Beispiel "uhrzeitabhängge Bildanzeige Tag / Nacht 01" wird hier kein Zufallsbild aus einer Auswahl ermittelt, sondern lediglich zwischen 2 Grafiken urzeitabhängig unterschieden.
Sie könnten z.B. auf Ihrer Entry-Page abhängig von der Tageszeit ein Panoramabild für die Nacht oder den Tag anzeigen lassen.
|
|
Beispielbilder für meine Demo:
Demo des Beispiels:
Willkommen auf meiner Geilenkirchenseite
Aufwand für den Webmaster
Sie müssen kein JavaScript-Experte sein um das Anwendungsbeispiel für Ihre Seite zu verwenden. Öffnen Sie die Quellcode-Datei und kopieren die Codezeilen in Ihre Seite.
- Scriptcode (siehe Quelltextdatei) im Head-Bereich einkopieren
- Funktionsaufruf in den Body-Bereich kopieren
- Inhalte für die Variablen 'CodeTag' und 'CodeNacht' anpassen
- Zeitspanne anpassen (Variablen 'SpanneStart' und 'SpanneStop'
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript  JavaScript Menü 01
Im Script
Inhalte für die Tagesanzeige / Nachtanzeige eintragen
// Inhalte für die Tagesanzeige
var CodeTag = 'hier eintragen';
// Inhalte für die Nachtanzeige
var CodeNacht = 'hier eintragen';
Beispiel:
// Inhalte für die Tagesanzeige
var CodeTag = '<img src="innenstadt-tag.jpg" width="550" height="280" ... >';
// Inhalte für die Nachtanzeige
var CodeNacht = '<img src="innenstadt-nacht.jpg" width="550" height="280" ... >';
Zwei Werte für die Zeitspanne eintragen
// hier die Zeitspanne (von / bis) für die Tagesanzeige eintragen
var TagStart = 7;
var TagStop = 22;
Im Body-Bereich
Den Funktionsaufruf fügen sie an der Stelle im BODY-Bereich ihrer Seite ein, wo die Inhalte angezeigt werden sollen.
<script type="text/javascript" language="JavaScript">
<!--
UhrzeitGrafik02()
//-->
</script>
Das war's schon! Lassen sie sich von den langen Erklärungen hier nicht abschrecken und kopieren für einen ersten Versuch einfach den Code in ihre Seite (Textdatei des Quellcodes im Kopfbereich oben). Wenn sie mehr über Funktion und Anpassungen erfahren möchten, lesen Sie unten weiter.
Wenn Ihnen das als Einstieg ausreicht öffnen Sie die Quellcodeseite, kopieren den Code in Ihre Seite und experimentieren weiter.
Aufgabe des Scripts
In diesem Beispiel soll das Script:
1) die aktuelle Uhrzeit aus dem Systemdatum ermitteln
2) den Stundenwert mit den Vorgaben vergleichen
3) den HTML-Code (z.B. für die entsprechende Grafik) in die Seite schreiben
Der HTML-Code für das Bild wird durch das JavaScript ermittelt. Abhängig von der Tageszeit wird dann als Resultat eine der beiden Grafiken in Ihrem Dokument angezeigt.
Den Zeitbereich (Stundenwerte) für die Entscheidung legen Sie in 2 Variablen fest:
// Zeitraum für die Tagesanzeige (Beispiel)
var TagStart = 10;
var TagStop = 18;
Das JavaScript schreibt den entsprechenden HTML-Code in das Dokument!
if (Stundenwert >= TagStart & Stundenwert < TagStop)
{
// HTML-Code für die Tagesanzeige schreiben
}
else
{
// HTML-Code für die Nachtanzeige schreiben
}
wenn der Stundenwert größer / gleich 10 und kleiner 18 dann ...
wenn nicht dann ...
Elemente für die Anzeige festlegen
Um den Einsatzbereich dieses Scripts flexibel zu gestalten verzichte ich hier auf die generelle Festlegung einer Grafik für die Tag- / Nachtanzeige. Alles was während des Tages bzw. während der Nacht angezeigt werden soll ordne ich in zwei Variablen zu. So können Sie, wenn Sie möchten, zusätzlich zur Grafik einen Text oder auch mehrere kleinere Grafiken einbinden. Der normale HTML-Code für die Inhalte wird innerhalb der einstrichigen Anführungszeichen (Hochkommas) eingetragen. Die Variablen heißen:
var CodeTag = ' '
var CodeNacht = ' '
Das was den beiden Variablen zugeordnet wird (Wert der Variablen), wird in das Dokument geschrieben. Wenn Sie also lediglich den HTML-Code für eine Grafik eintragen, wird auch nur eine Grafik angezeigt. Das dürfte die Standard-Anwendung für mein Script sein. Mehr ist allerdings auch möglich (mehrere Grafiken, Grafik + Text)!
Das JavaScript schreibt dann uhrzeitabhängig den Wert einer der Variablen in das Dokument:
// HTML-Code für die Tagesanzeige schreiben
document.write(CodeTag);
// HTML-Code für die Nachtanzeige schreiben
document.write(CodeNacht);
1 HTML-Code für eine Grafik eintragen
In der Minimalvariante (nur Bildanzeige) stehen innerhalb der einstrichigen Anführungszeichen nur übliche HTML Anweisungen für die <img>-Tags.
var CodeTag = '<img src="tag.jpg" width="560" height="280" border="0" alt="">'
var CodeNacht = '<img src="nacht.jpg" width="560" height="280" border="0" alt="">'
2 HTML-Code für weitere Inhalte eintragen
Sie können das durch eine Bildbeschreibung oder einen Kommentar (sogar als formatierten Text) ergänzen. Den Text, die HTML-Anweisungen oder CSS-Formatierungsanweisungen notieren Sie zusätzlich innerhalb der einstrichigen Anführungszeichen. Achten Sie darauf, das keine harten Zeilenümbrüche (oder zusätzliche einstrichige Anführungszeichen) innerhalb der Anführungszeichen stehen.
var CodeTag = '<img src="nacht.jpg" width="560" height="280" border="0" alt="">
Nachtaufnahme Geilenkirchen<br>
<span style="color:#FF007F">Foto aufgenommen am 20. Juni 2010</span>'
Die hier grün angezeigten Zeilenumbrüche müssen gelöscht werden. Der Code erscheint dann in einer (ellenlangen) Zeile hintereinander. Also alle harten Zeilenümbrüche (Returns) entfernen! Möchten Sie innerhalb der Anzeige eine neue Zeile beginnen, fügen Sie die HTML-Anweisung <br> ein.
Eventuell wird sonst eine Fehlermeldung (nicht abgeschlossene Zeichenkette) angezeigt und die Bilddarstellung fehlt.
ähnliche Themen
 Zufallsgrafik beim Öffnen der Seite anzeigen
Zufallsgrafik ersetzt Startgrafik nach x Sekunden
Zufallsgrafik als Link - eine von X Grafiken
Zufallsgrafik mit zugehörigem Text 01
Zufallsgrafik mit zugehörigem Text 02 (Grafik-URL im Array)
| 
Home • Bilder • Grafik zeitabhängig
Download
Demo
