 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.
|
|
mehrere bestimmte Dateien nur ab festgelegtem Datum öffnen
UPDATE 05.06.2011 19:00 Uhr, neues Script überarbeitet & vereinfacht
1 Einsatzbereiche
Mit diesem Scriptbeispiel können sie Kalender 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 Scriptbeispiel ü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 01
Rechts unten sehen sie einen Screenshot für das Beispiel 03
Setzen sie dieses Beispiel ein, um z.B. einen Event 'stückchenweise' anzukündigen oder um eine Webseite für einen Reisebericht bereits vorab mit einen passenden Übersicht einzurichten, wenn die Seiten für die jeweiligen Tage später hoch geladen werden sollen.
|
|
Meine Demo 03 zeigt eine weitere Einsatzmöglichkeit als Rätselkalender: 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.
- Sommerferien: Jeden Tag ein Tipp für ein Ausflugsziel
- Bastelkalender: Täglich einen Basteltipp präsentieren
- Event ankündigen: Stand der Vorbereitungen im Web präsentieren
- Angebote: Angebot des Tages veröffentlichen
- Rätselkalender: Auflösung stückchenweise verraten
Dabei sollen die jeweiligen Seiten nur ab einem bestimmten Datum abrufbar sein, Seiten eines früheren Datums können aber eingesehen werden, nach dem Motto "das wäre ihr Preis gewesen" (Rudi Carell). Bei einem Rätselkalender haben Teilnehmer die später einsteigen so auch die Möglichkeit, Tipps zur Auflösung vergangener Tage zu lesen.
2 Steuerung
Eine Datei für den 18. August kann nur am 18.08 oder später geöffnet werden.
Eine Datei für den 19. August kann nur am 19.08 oder später geöffnet werden.
Die Anzahl der Unterscheidungen (Datum) 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, für 1 X wöchentlich (z.B. immer Montags) oder sogar in unregelmäßiger Folge in beliebiger Anzahl eingetragen werden.
Während im Beispiel  Osterkalender 01 Textlinks verwendet werden nutze ich hier eine ImageMap. mehr Info zu Image-Maps
Das bedeutet sie können ihre eigene Grafik einbinden und die verweissensitiven Bereiche selbst festlegen oder sogar um weitere Klickbereiche erweitern.
3 Aufwand
Wenn sie eine ZIP-Datei der Beispiele Osterkalender 02-1 oder 02-2 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.
Wenn sie die ZIP-Datei meines Beispiels Rätselkalender 02-3 herunter laden und in einem neuen Ordner auspacken, besitzen sie einen funktionierenden Kalender für 4 Tagesdateien und einer Info-Datei. Die Tagesdateien sind allerdings bis auf das angezeigte Datum leer.
- Script im Head-Bereich notieren
- Image-Map und Links im Body-Bereich notieren
- entsprechende Tagesdateien erstellen
- Info-Datei (info02.htm) bearbeiten
Der Dateiname '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).
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
Hinter jedem Link versteckt sich ein Aufruf der Funktion 'Anzeigen()'. Innerhalb der Klammern beim Funktionsaufruf sind zwei Ziffern eingetragen. Bei den Ziffern handelt es sich um Angaben zum Tag und Monat, ab dem die Anzeige der entsprechenden Datei gültig sein soll.
Für einen Textlink würde der Verweis so aussehen:
<a href="javascript:Anzeigen(10,4);">22</a>
Für die im Beispiel 1 + 2 verwendete Image-Map sieht die Notierung so aus:
<area shape="circle" coords="312,98,80" href="javascript:Anzeigen(10,4);">
Für die im Beispiel 3 verwendete Image-Map sieht die Notierung so aus:
<area shape="rect" coords="74,191,184,252" href="javascript:Anzeigen(3,1);">
Der aufgerufenen Funktion 'Anzeigen()' werden 2 Parameter übergeben. Mit den Parametern lege ich fest, für welchen Tag und Monat der Aufruf gelten soll. Im 1. Beispiel oben handelt es sich um die Ziffern '10' und '4'. Daraus schließen sie richtig wenn sie annehmen, dass der Aufruf der Datei für den 10. April vorgesehen ist. Am 10. April (oder später) soll diese Datei aufgerufen werden können.
Mit den beiden Werten für den angeklickten Tag übergebe ich an die Funktion also 2 Zahlen. Die beiden Ziffern verwende ich innerhalb der Funktionen für zwei Zwecke:
- zur Datumsprüfung wegen der Gültigkeit des Aufrufs
- zum 'Zusammenbauen' des Dateinamens
1) Die Funktion untersucht, ob das Datum das ich aus diesen beiden Werten zusammensetze, größer als das aktuelle Datum ist oder nicht. 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 diesen Ziffern zusammensetzt. Da für die Dateinamen immer 4 Zeichen (eine vierstellige Zahl) vorsehe, wird bei einstelligen Ziffern jeweils eine Null vorangestellt. Daraus folgt, die Dateinamen der Tagesdateien müssen nach diesem Schema festgelegt sein: 4stellige Zahl plus Punkt plus 'htm'
Datei für den 26. Jan.: 2603.htm
Datei für den 27. Mär.: 2703.htm
Datei für den 28. Mär.: 2803.htm
Datei für den 29. Mär.: 2903.htm
|
Datei für den 03. Jan.: 0301.htm
Datei für den 04. Jan.: 0401.htm
Datei für den 05. Jan.: 0501.htm
Datei für den 06. Jan.: 0601.htm
|
Die Fehlerdatei sollte info02.htm heißen
Kommentare zur Erklärung habe ich im Script notiert.
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.
 Info Systemdatum ver- / einstellen 
Grafik für Bastler
Von mir vorbereitete zusätzliche Grafik im Download 3
Hier können sie mit einem Grafikprogramm ihr Zieldatum einfügen
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)
|
Home • Diverses • Rätselkalender 02
alle Demos + Downloads
Demo 1 
DOWNLOAD DEMO 1 
Unten rechts auf dem Bildschirm wird (Windows) normalerweise die Uhrzeit angezeigt. Dort kann man rechtsklicken und Kalender und Zeit ver- / einstellen.
