Adventskalender, eigenes, Hintergrundbild, Script, Vorlage, JavaScript, Beispiel, download, free, kostenlos, Weihnachten, Advent, Weihnachtszeit, online, Onlinekalender, Weihnachtskalender, kostenloser, Kalender, Adventszeit, web-toolbox, Jansen
 Adventskalender 15
    
 Home • Adventskalender • Kalender 15 • Beschreibung + Download Demo

 Beschreibung / Erklärung Adventskalender 15

Der Kalender mit 24 Klickbereichen. Bei MouseOver wird die Fensterchennummer (Tag) angezeigt, anklicken öffnet die jeweilige Tagesdatei. Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken. Klicken sie oben auf Demo!

Adventskalender 15   (Klickbereiche als Image-Map)

Bisher habe ich vier Varianten des Kalenders 15 vorbereitet.
  • Variante 01 des Kalenders zeigt die 24 Tagesdateien im einem PopUp-Window
  • Variante 02 des Kalenders zeigt die 24 Tagesdateien im gleichen Fenster
  • Variante 03 des Kalenders zeigt die 24 Tagesdateien als PDF-Datei
  • Variante 04 des Kalenders zeigt die 28 Tagesdateien im einem PopUp-Window


Demo des Downloads Kal 15-01
Tagesdatei im gleichen Fenster

Demo des Downloads Kal 15-02
Tagesdatei im PopUp-Window




Demo des Downloads Kal 15-03
Tagesdatei als PDF-Datei



Demo des Downloads Kal 15-28
28 Tagesdateien



  Erklärung und Funktion

In diesem Adventskalender verwende ich nach der völligen Überarbeitung ein neues Script (Version: September 2011). Die Funktionen zur Datumsanzeige, zur Datumsprüfung und für die Anzeige der Tageszahlen bei MouseOver wurden überarbeitet. Die Tagesdateien stehen nun in einem eigenen Unterordner!


Der Kalender zeigt das Kloster Gengenbach. 24 Fenster dieser Grafik sind als verweissensitive Bereiche einer ImageMap deklariert.

Verweissensitive Grafik (engl. image map).

Verweissensitive Grafiken bieten eine Möglichkeit, Hyperlinks innerhalb einer Grafik zu plazieren. Sie werden als rechteckige, runde oder freie Schaltflächen realisiert, die sich wie Verweise verhalten. Der sich verändernde Cursor der Maus deutet auf die nicht sichtbaren Schaltflächen hin.

Auf Web-Seiten häufig anzutreffende Beispiele sind Landkarten, in denen bestimmte Regionen zu den entsprechenden Seiten führen. Daneben findet man sie auch in „interaktiven“ Adventskalendern.

Eine solche Imagemap ist eine Grafik, die ganz normal mit einem <img>-Tag notiert wird. Zusätzlich wird das Attribut usemap eingetragen und ein Name für diese Map vergeben.

Zur Seite 'Erklärungn einer ImageMap' wechseln



Diese Imagemap-Bereiche lassen sich nur an dem dazugehörigen Tag im Dezember mit Erfolg anklicken. Ausnahme: Dateien der vorhergehenden Tage können ebenfalls geöffnet werden. Dann wird die entsprechende Tagesdatei angezeigt. Ungültige Versuche wie Klicken im November oder für in der Zukunft liegenden Adventstage öffnen eine Datei mit entsprechender Meldung. Vor Erreichen des entsprechenden Datums im Advent, lässt sich normalerweise (bei richtig eingestelltem Systemdatum) eine Tagesdatei nicht öffnen.


  • Die Grafik steht innerhalb einer Tabelle in der Seitenmitte
  • Die 24 Ziffern sind Klickbereiche einer Image-Map
  • Bei MouseOver erscheint dort eine Nummer von 1 bis 24
  • Bei Klick wird eine Tagesdatei geöffnet (1.htm - 24.htm)
  • Bei Klick von Jan. - Nov. wird die Datei 00.htm gezeigt.
  • Angezeigt werden nur Tagesdateien des aktuellen und früheren Datums
  • Klicken z.B. am 5. Dez. auf das Kästchen für den 12. Dez. wird 0.htm gezeigt.
  • Schneefallscript eingebaut  © Altan - Copyright-Info    Webseite
  • Counter: Tage bis Weihnachten werden angezeigt
  • Nach dem 1. Dezember Aufforderung zum Klicken

Im Download (ZIP-Datei) versionsabhängig:

1 Adventskalender als HTML-Datei
1 Grafik Kloster Gengenbach
1 Musterseite Meldung 'zu früh' als HTML-Datei
1 Musterseite Meldung 'gemogelt' als HTML-Datei
24 Vorlagen für Tagesdateien

Die Grafiken dürfen für meinen Kalender frei verwendet werden!



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

Mehr Info dazu finden sie im Menü links






   Schritte zum Einbau

1) Zip-Datei herunterladen und in einem neuen Ordner auspacken.
2) Titeltext anpassen.
3) meine 24 Tagesdateien anpassen.
4) Kalender testen


Soll ihr Kalender nach bestandenem Test im Web veröffentlicht werden, laden sie ihren Ordner mit sämtlichen Dateien auf den Server und verlinken die Kalenderdatei, (wenn Sie möchten) mit dem Attribut '_blank', damit der Kalender in einem neuen Browserfenster angezeigt wird. 
<a target="_blank" href="ordnername/kalenderxxxxxx.htm"> zum Adventskalender </a>
Möchten sie den Kalender als CD verschicken, brennen sie sämtliche Daten auf einen Silberling.



Das war's schon!

Alles Notwendige ist getan! Wenn sie meinen Adventskalender als Zip-Datei herunter geladen haben, besitzen sie einen funktionierenden Online-Adventskalender. Sie können den Adventskalender noch weiter anpassen. Informationen dazu finden sie im Menü links.




Weitere Anpassungen

Möchten sie ...
  • PopUp-Box (Tageszahl) gestalten
  • eigene Tagesdateien erstellen
  • meine Musterdateien modifizieren
  • den Schneefall modifizieren
  • eine Musikdatei einbinden
... darf ich sie auf die Anleitungen zur Modifikation hinweisen. Sie finden die Anleitungen im Menü links.

 
Info zum Schneefall-Script

Das JavaScript für die langsam einschwebenden Schneeflocken habe ich nicht selbst geschrieben, darf aber frei verwendet werden, wenn die Copyright-Informationen unverändert bleiben!

Copyright-Informationen zum Schneefallscript von Altan im Menü links.







18.10.2002   
NACH OBEN