Grafik datumsabhängig
    
 HomeDatum • Grafik datumsanhängig 01 Demo  Download  Quellcode 

 Grafik datumsabhängig anzeigen 01 eine von 2 Grafiken

Dieses JavaScript vergleicht das Systemdatum und Ihre Vorgabe für den Stichtag. Bis zu einem bestimmten Datum soll Grafik A angezeigt werden. Danach soll automatisch die Grafik B angezeigt werden.

Eine von 2 Grafiken datumsabhängig anzeigen

Der Einsatz dieses Codeschnipsels erspart dem Webmaster die termingerechte Überarbeitung einer Webseite, weil die Grafik vom Script beim Einlesen der Seite bestimmt wird. Ein Austauschen der Grafik "von Hand" für abgelaufene Termine entfällt.

 (Anzeige nach Ablauf des Datum)
 (Anzeige vor Ablauf des Datums)


Die Funktion DatumGrafik01() zeigt eine von 2 Grafiken abhängig vom Stichtag des Datums an. Ich wende diese Funktion z.B. in meiner Sitemap an, um neue Beiträge zu kennzeichnen.

Dieses Script ermittelt aus dem Systemdatum und dem vorgegebenn Stichtag die Differenz. Das Resultat wird eine positive Zahl, eine negative Zahl oder Null sein. Abhängig davon, wird entweder Grafik A oder Grafik B angezeigt.


 Grafik x vor Stichtag - diese Info ist bereits älter
 Grafik x vor Stichtag - diese Info ist bereits älter
 Grafik y nach Stichtag - diese Info ist brandneu
 Grafik y nach Stichtag - diese Info ist brandneu


   Grundlage der Berechnung

 Information einblenden / ausblenden


   Funktion für dieses Anwendungsbeispiel

Berechnung des Abstandes zwischen 2 Datumswerten und dann eine entprechende Grafik anzeigen. Die Datenquelle für die beiden Grafiken werden zwei Variablen zugeordnet. Dort wird der HTML-Code für die Grafiken eingetragen:
var image01 = 'HTML-Code für Grafik Nr. 1'
var image02 = 'HTML-Code für Grafik Nr. 1'
var image01 = '<img src="list01.gif" width="16" height="16" border="0" alt="">'
var image02 = '<img src="list02.gif" width="16" height="16" border="0" alt="">'
Dort wo die Grafik (eine der beiden) angezeigt werden soll, tragen Sie den JavaScript-Funktionsaufruf in Ihre Seite ein. Der Funktion werden die Parameter für den Stichtag übergeben.

Syntax: Numerische Einträge durch Komma trennen: DatumGrafik01(Tag,Monat,Jahr)
<script type="text/javascript" language="JavaScript">
<!-- Begin

DatumGrafik01(10,5,2007);

//  End -->
</script>

   Demo

Notierung im Body-Bereich der HTML-Seite (für die erste Grafik):
<script type="text/javascript" language="JavaScript">
<!-- Begin
DatumGrafik01(25,12,2010);
//  End -->
</script>



   Beispiel

Sie haben mehrere Grafiken zur Verfügung die auf Ihrer Seite die Aktuallität des Beitrags oder z.B. den Zeitraum für einen Sonderrabatt anzeigen sollen. Sie entscheiden sich für die Grafik 1 + 3 (später mehr zur Einbindung einer 3. Grafik).

Grafik 1     Grafik 2     Grafik 3     Grafik 4

var image01 = '<img src="grafik1.gif" width="25" height="25" border="0" alt="">'
var image02 = '<img src="grafik3.gif" width="25" height="25" border="0" alt="">'
Beim Einsatz der Funktion mit den Parametern "10,5,2007" ...
<script type="text/javascript" language="JavaScript">
<!-- Begin
DatumGrafik01(10,5,2007);
//  End -->
</script>
... wird bis zum 10.5.2007 die Grafik 1 angezeigt und ab dem 11.5.2007 die Grafik 3 angezeigt. Das könnte dann so aussehen:

  Spaltenüberschrift

Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden

   

  Spaltenüberschrift

Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden

bis zum 10. Mai Kennzeichnung als Neu     nach dem 10. Mai Kennzeichnung als Info



   Einsatzbereiche

Sie können diese Funktion einsetzen, um einen grafischen Marker oder eine größere Grafik datumsabhängig anzeigen zu lassen. Bis zu dem Stichtag soll zuächst Grafik A angezeigt werden. Danach soll Grafik B angezeigt werden. Das geschieht mit dieser Funktion automatisiert. Das erspart dem Webmaster die dauernde / termingerechte Überarbeitung der Seite. Nichts wäre schlimmer als das, vermittelt es dem Seitenbesucher doch den Eindruck, das sich niemand kümmert und die Webseite nicht regelmäßig aktualisiert wird.

Die Verwendung ist natürlich nicht auf die Darstellung innerhalb einer Sitemap oder zur Kennzeichnung eines neuen Artikels beschränkt.

a) neue Artikel werden wie gewünscht über einen festen Zeitraum gekennzeichnet.
b) Uralt-Artikel erscheinen nicht nach 4 Wochen immer noch mit einem blinkenden 'new'.
c) Grafiken symbolisieren den aktuellen Stand


Mitarbeiter sind zum Team-Training bis zum 17.03.2011: DatumGrafik01(17,3,2011)

 

Anmeldung zur Schau bis zum 20.04.2011: DatumGrafik01(20,4,2011)

 

wir renovieren bis zum 01.02.2011: DatumGrafik01(1,2,2011)

 







Grafik datumsanhängig 03 - Grafik + Text

Grafik datumsanhängig 04 - Grafik + Datum + Text

Grafik + Text - Liste der Termine mit Grafik - jahresübergreifend

Liste der Termine jahresübergreifend - Kalenderblatt + Tagescounter + Text