Osterkalender 02
 HomeDiverses • Rätselkalender 02 Quelltext  Demo2  Demos + Downloads

Rätselkalender Feiertagskalender 02  (Imagemap)

Ein Osterkalender, ein Ferienkalender ... . Was immer Sie mit dieser Vorlage herstellen möchten. Das Script steuert und kontrolliert das Öffnen von bestimmten Dateien ab einem festgelegten Datum (Tag / Monat), ähnlich wie bei einem Adventskalender.
verweise links datumsabhängig aktivieren datum monat tag

Mehrere Dateien nur ab einem festgelegten Datum öffnen

   Einsatzbereiche: Feiertagskalender, Reisebericht, Rätselkalender, ...

Dateien können ab einem festgeleten Datum aufgerufen werden. Für die Klickbereiche der Steuerung wird eine Grafik als Image-Map angeboten.

Mit diesem Modul können Sie Steuerungen für viele unterschiedliche Zwecke herstellen. Zum Beispiel für einen Reisebericht, für den Link des Tages, einen Oster-, Ferien- oder Rätselkalender und natürlich auch für einen Adventskalender. Sie können das Modul überall dort einsetzen wo Sie kontrollieren möchten, ab wann eine Datei geöffnet werden darf.

Rechts oben sehen Sie einen Screenshot für das Beispiel V02-02, darunter einen Screenshot für das Beispiel V02-03 (anklicken).

Setzen Sie dieses Steuermodul ein, um z.B. einen Event 'stückchenweise' anzukündigen, um eine Webseite mit einen passenden Steuerung für einen Reisebericht bereits vor der Reise einzurichten (Seiten werden während der Reise hoch geladen) oder bereiten Sie einen Sommerferienkalender vor und können sich mit dem Upload der Tagesdateien Zeit lassen.




Beispiel einer Grafik, die man als Image-Map für einen Reisebericht einsetzen könnte.




Meine Demo V02-02 zeigt eine Einsatzmöglichkeit als Osterkalender mit dem Aufruf von 4 Dateien für Karfreitag - Ostermontag. Die Demo V02-03 zeigt den Einsatz als Rätselkalender (4 Dateien) : Jeden Tag kommt der Seitenbesucher der Auflösung ein wenig näher. Ein Kalender zum 'neugierig machen' der frequente Besuche Ihrer Seite garantiert. Eine Masche, die in der Werbung immer häufiger auftaucht. Möglichkeiten für den Einsatz des Moduls:
Dabei sind die jeweiligen Seiten nur ab einem bestimmten Datum abrufbar, Seiten eines früheren Datums können allerdings nachträglich eingesehen werden. Bei einem Rätselkalender haben Teilnehmer die später einsteigen so auch die Möglichkeit, Tipps zur Auflösung vergangener Tage zu lesen.


1  Steuerung

Anders als im Rätselkalender V01 mit Textlinks nutze ich hier die Technik einer ImageMap. Bestimmte Bereiche der angezeigten Grafik sind verweissensitiv und funktionieren wie ein Link. In meinen Demo-Modulen habe ich 4 Bereiche festgelegt (V02-02 die 4 Eier, V02-03 4 Texte). Sie könnten Ihre eigene Grafik einbinden und die verweissensitiven Bereiche selbst festlegen.

mehr Info zu Image-Maps

Abhängig von den Übergabewerten im Link wird das Öffnen der Dateien überwacht. Eine Datei für den 18. August kann nur am 18.08 oder später geöffnet werden. Die Datei für den 19. August kann nur am 19.08 oder später geöffnet werden.

Die Anzahl der Unterscheidungen für ein Gültigkeitsdatum ist quasi nicht begrenzt (max. 365) und muss keiner Regel folgen. Der Zeitpunkt (Datum) wird für jede Datei mit Tag und Monat festgelegt. Die Datumswerte müssen nicht aufeinander folgen wie beim Adventskalender. Die Werte könnten also täglich aufeinander folgend, 1 X wöchentlich (z.B. immer Montags) oder sogar in unregelmäßiger Folge in beliebiger Anzahl eingetragen werden.

Das bedeutet Sie können Ihre eigene Grafik einbinden und die Anzahl der verweissensitiven Bereiche entsprechend der Anzahl der verlinkten Dateien festlegen. Für jeden Link bestimmen Sie das früheste Klickdatum durch zwei Zahlenwerte für Tag und Monat. Zum Beispiel mit "22,4" für den 22. April.
<a href="javascript:Anzeigen(22,4);" ...

 
2  Demo und Download

Hie können Sie die beiden von mir vorbereiteten Module mit 4 Klickbereichen ansehen und als ZIP-Datei herunterladen. Das Modul V02-02 habe ich als Osterkalender gestaltet. Das Modul V02-03 als Rätselkalender / Steuerung zur Ankündigung eines Events.

Modul V02-02



Demo V02 - 02 anzeigen
 

 Download alle Dateien
zusätzliche (leere) Grafik finden Sie unten
Modul V02-03



Demo V02 - 03 anzeigen
 

 Download alle Dateien
mit zusätzlicher Grafik ohne Datum



3  Aufwand

Wenn Sie die ZIP-Datei des Beispiels Osterkalender V02-02 herunter laden und in einem neuen Ordner auspacken, besitzen Sie einen funktionierenden Osterkalender mit 4 Tagesdateien und einer Info-Datei. Die Tagesdateien sind allerdings bis auf das angezeigte Datum leer. Die eingetragenen Termindaten für 2014 können Sie ändern.

Wenn Sie die ZIP-Datei meines Beispiels Rätselkalender V02-03 herunter laden und in einem neuen Ordner auspacken, besitzen Sie einen funktionierenden Rätselkalender mit 4 Tagesdateien und einer Info-Datei. Die Tagesdateien sind allerdings bis auf das angezeigte Datum leer. Die Termindaten ändern Sie natürlich.
// erster Klicktag eintragen (für den Counter)
var ZielDatum = new Date("April 18, 2014");
Eigene Grafik verwenden

Sie können Ihre eigene Grafik einsetzen, müssten dann aber die verweissensitiven Bereiche neu festlegen. Ich habe für jeden kalender eine Grafik vorbereitet, die Sie mit einem Grafikprogramm bearbeiten können. Wenn Sie eine dieser Grafiken einsetzen, müssen die verweissensitiven Bereiche nicht neu festgelegt werden. Die Grafiken finden Sie weiter unten.

Fehlerdatei

Der Dateiname 'info.htm' bzw. 'info02.htm' ist als Standard für die Fehlerdatei bereits eingetragen. Wenn Sie Ihre Datei anders benennen möchten können Sie den Einträg ändern (Groß- Kleinschrift beachten).
var Dateiname =  "info.htm";


Das war's schon!

Alles Notwendige ist getan! Sie können den Kalender noch weiter anpassen indem sie als Klickbereich zusätzliche Verweisflächen definieren oder eine eigene Grafik verwenden.

mehr Info zu Image-Maps




   Erklärung der Funktion

Schema der Prüfung:




Hinter jedem Link der Image-Map versteckt sich der Aufruf der Funktion 'Anzeigen()'. Innerhalb der Klammern werden zwei Zahlenwerte (durch ein Komma getrennt) eingetragen. Bei den Werten handelt es sich um Angaben zum Tag und Monat, ab dem die Anzeige der entsprechenden Datei gültig sein soll.

Der Fachmann würde sagen: Der beim Klicken aufgerufenen Funktion 'Anzeigen()' werden 2 Parameter übergeben. Mit den Parametern lege ich fest, für welchen Tag und Monat der Aufruf gelten soll.

Für einen Textlink würde der Verweis für den 10. April so aussehen:
<a href="javascript:Anzeigen(10,4);">22</a>
Für eine Image-Map sieht die Notierung für den 10. April so aus:
<area shape="circle" coords="312,98,80" href="javascript:Anzeigen(10,4);">
<area shape="rect" coords="74,191,184,252" href="javascript:Anzeigen(10,4);">
In der Erklärung oben setze ich die Zahlenwerten '10' und '4' ein. Der Aufruf der Datei soll ab dem 10. April (oder später) zugelassen werden. Ich übergebe an die Funktion 2 Werte. Die beiden Werte verwende ich innerhalb der Funktionen
  1. zur Datumsprüfung / der Gültigkeit des Aufrufs
  2. zum 'Zusammenbauen' des Dateinamens
1) Die Funktion untersucht ob das aus diesen beiden Werten ermittelte Datum, gleich dem aktuellen Datum oder kleiner ist. Sie lässt den Aufruf der Datei zu oder zeigt eine Info-Datei.

2) Die Funktion 'baut' aus diesen beiden Werten einen Dateinamen, der sich aus den beiden Werten zusammensetzt. Da ich für die Dateinamen immer 4 Zeichen (eine vierstellige Zahl) vorsehe, wird bei einstelligen Ziffern jeweils eine Null vorangestellt. Die Dateinamen der Tagesdateien müssen nach diesem Schema festgelegt sein: 4stellige Zahl plus Punkt plus 'htm'

Anzeigen(26,1)
Anzeigen(27,3)
Anzeigen(3,1)
Anzeigen(24,12)
Datei für den 26. Jan.
Datei für den 27. Mär.
Datei für den 03. Jan.
Datei für den 24. Dez.
Dateiname: 2603.htm
Dateiname: 2703.htm
Dateiname: 0301.htm
Dateiname: 2412.htm




Das Script im Head-Bereich

<script type="text/javascript" language="JavaScript">
<!--

// Version 2.0 - 05.06.2011

// ersten Klicktag für den Counter eintragen
var ZielDatum = new Date("April 10, 2011");

// aktuelles Datum - Werte entnehmen
var KDatum = new Date();
var KTag = KDatum.getDate();
var KMonat = KDatum.getMonth() +1;

// VergleichsVariable "JetztString" aktuelles Datum
KTag = ((KTag < 10) ? "0" : "")+ KTag;
KMonat = ((KMonat < 10) ? "0" : "")+ KMonat;
var JetztString = KMonat + KTag;


function Anzeigen(ZahlTag,ZahlMonat)
{

// "VergleichString" herstellen (TTMM)

tt = ((ZahlTag < 10) ? "0" : "")+ ZahlTag;
mm = ((ZahlMonat < 10) ? "0" : "") + ZahlMonat;
var VergleichString = mm + tt;


if(JetztString >= VergleichString)
{
var Dateiname = tt + mm + ".htm";
}
else
{
var Dateiname =  "info.htm";
}

window.location.href = Dateiname;

}

//-->
</script>



Der Link zum Aufruf im Body-Bereich

<area shape="circle" coords="312,98,80" href="javascript:Anzeigen(10,4);">
Als Übergabewerte werden Tag und Monat eingetragen. Die numerischen Werte stehen nicht in Anführungszeichen!
<area shape="circle" coords="312,98,80" href="javascript:Anzeigen(10,4);">
Als anklickbarer Bereich ist hier eine verweissensitive Fläche einer Image-Map festgelegt. Ich habe werden mittels Koordinatenangaben und Radius kreisförmige Bereiche definiert.

mehr Info zu Image-Maps

Stellen sie sicher, das eine entsprechende Datei bereitgestellt wird. Für diesen Link z.B. muss eine Datei mit dem Namen '1004.htm' vorhanden sein. Außerdem sollte eine Datei mit der Bezeichnung 'info02.htm' vorhanden sein die immer dann angezeigt wird, wenn ein ungültiger Aufruf erfolgt.


 

   Kalender testen

Nach dem Entpacken der ZIP-Datei in einem neuen Ordner, lassen sich die Funktionen des Kalenders nätürlich nicht alle testen. Schließlich wird durch eine Datumsprüfung verhindert, das man die Dateien zu früh öffnet. Zum Testen müssten sie das Systemdatum ihres Rechners vordatieren.

Bevor man das Systemdatum umstellt sollte man prüfen, ob installierte Programme zeitgesteuerte Erinnerungen öffnen (z. B. Outlook). Ansonsten könnte eine Flut von Meldungen angezeigt werden, sobald Sie das Systemdatum auf einen Tag in der Zukunft einstellen! Deaktivieren Sie gegebenenfalls die Erinnerungsfunktion während der Testzeit.



Info Systemdatum ver- / einstellen

Uhrzeit und Datumseinstellungen Ihres Rechners ändern: Unten rechts auf dem Bildschirm(Windows) wird normalerweise die Uhrzeit angezeigt. Dort kann man rechtsklicken und Kalender und Zeit ver- / einstellen.





Ist die Uhr nicht zu sehen:
  • Startleiste rechtsklicken
  • Eigenschaften
  • Uhr anzeigen markieren


 

   Grafiken für Bastler

Für den Osterkalender V02-02

Von mir vorbereitete zusätzliche Grafik für den Rätselkalender V02 - 02
Hier können Sie Ihr eigenes Motiv einfügen (Klickbereiche sind bereits vorhanden)
(Grafik rechtsklicken zum Download)



Für den Rätselkalender V02-03

Von mir vorbereitete zusätzliche Grafik für den Rätselkalender V02 - 03
Hier können Sie mit einem Grafikprogramm Ihr Zieldatum einfügen
(Grafik ist im Download enthalten)


Die originale, unbearbeitete Grafik stammt von Wikimedia und wurde
unter der 'GNU Free Documentation License' veröffentlicht.
(Erlaubnis zum Kopieren, Bearbeiten und Verbreiten. Autor: Producer.)

 

   Mogeln


Hinweis: Mogeln ist auch für Besucher möglich!

Was sie zu Testzwecken können, kann auch ihr Seitenbesucher auch. Einfache aber arbeitsaufwändige Abhilfe: Täglich und kurzfristig die entsprechende Tagesdatei hoch laden.

Die im Kalender verwendete Datumsinformation ist immer das Datum, das am lokalen Rechner eingestellt ist. Bei einem korrekt eingestellten Datum am Computer des Seitenbesuchers (Windows: Uhrzeitanzeige in der Statuszeile rechts unten) wird auch das richtige Datum verwendet.

Aber ja, sie haben Recht wenn sie behaupten, dass man durch Verstellen des Systemdatums (z.B. auf den 24. Dezember) in der Lage ist, schon vorher alle Fenster zu öffnen.

Wenn sie versierter Webmaster sind und sich mit PHP auskennen:

Abhilfe schafft ein kleiner Trick:

Sie lesen das Datum vom Server aus (das stimmt ja immer) und übergeben das Serverdatum an das Kalenderscript. Dann ist Mogeln nicht mehr so einfach möglich.

Dazu benötigen sie allerdings Kenntnisse in PHP und die Kalenderdatei darf nicht als HTML-Datei, sondern als PHP-Datei gespeichert werden. Voraussetzung für diese Option ist natürlich, dass ihr Provider ihnen erlaubt PHP-Scripte auf dem Server auszuführen. Der Aufwand lohnt aber nicht.


Zu diesem Thema habe ich eine eigene Seite erstellt. Im Menü links im
Untermenü 'allgemeine Modifikationen' finden sie den Menüpunkt

Datum vom Server (PHP)

Dateien nur ab einem bestimmten Datum öffnen - Verweise als Textlinks





Das könnte Sie auch interessieren: