Online Adventskalender 12
 HomeAdventskalenderKalender 12 • Beschreibung + Erklärung Demo 02 12-01-A

Beschreibung / Erklärung Adventskalender 12

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 12   (Kreisgrafik - Klickbereiche als Image-Map)

Dieser Kalender wurde am 26.10.2009 veröffentlicht und am 07.11.2012 überarbeitet. Der Kalender benötigt eine Mindestbreite von 500 Pixel (plus Randbreite). Die 24 Ziffern im Kreisring dieser Grafik sind als verweissensitive Bereiche einer ImageMap deklariert.

Welche Grafik im Innenkreis angezeigt wird können Sie selbst bestimmen.

Weitere Varianten und Demos demnächst.

Demo des Downloads ansehen

Online Adventskalender Vorlage

Damit Sie im Innenkreis Ihre eigene Grafik darstellen können, habe ich den Kalender in zwei Ebenen aufgebaut.

In einer 500 × 500 Pixel großen Tabelle wird Ihr Foto / Ihre Grafik als Hintergrund eingebunden. Im Vordergrund, als Inhalt der Tabellenzelle, ist meine transparente Kreisgrafik notiert. Mit einem eigenen Foto könnten Sie den Kalender daher leicht personalisieren.

Demo des Kalenders 12-01 ansehen

Online Adventskalender Vorlage

Sreenshot Adventskalender 12-01:
Online Adventskalender Vorlage


Die Grafik zu diesem Kalender ist ein eigener Entwurf und darf für meinen Online-Adventskalender kostenlos genutzt werden.

Wenn Sie die Zip-Datei des Adventskalenders 12 herunter laden, besitzen Sie einen funktionierenden Kalender und müssen nur noch die 24 Tagesdateien mit Leben füllen.

Sie können meine Grafik, die in der Mitte des Kalenders angezeigt wird nutzen. Es steht Ihnen aber frei, eine eigene Grafik einzubinden.

Eine kurze Anleitung finden Sie im Menü links.

Demo 3 des Kalenders 12-01 ansehen

Online Adventskalender Vorlage

Ich stelle Ihnen nun auch die Variante 12-01-C zur Verfügung. Dieser kalender ist für die Anzeige von PDF-Dateien als Tagesdatei vorgesehen.

Der Kalender zeigt in der Kreismitte standardmäßig ein serbst erstellte Grafik. Sie können natürlich eine eigene Grafik / ein eigenes Foto von 500 × 500 Pixel verwenden.

Eine kurze Anleitung finden Sie im Menü links.

Demo 1 des Kalenders 12-02 ansehen

Online Adventskalender Vorlage



Nur Version 12-01-C

In der Version 12-03 wird die Tagesdatei als PDF-Datei angezeigt! Sie benötigen 24 PDF-Dateien. Wenn Sie ihre selbst erstellten PDF-Dateien nach meinem Schema benennen, müssen Sie in der Kalenderdatei nichts ändern! mehr Info auf der Beschreibungsseite für PDF-Tagesdateien (Menü links)



   Schritte zum Einbau

1) Zip-Datei herunterladen und in einem neuen Ordner auspacken
2) Kalender vorab testen
3) Titeltext anpassen
4) 24 Tagesdateien herstellen / modifizieren
5) 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.







  Erklärung und Funktion

Der Kalender zeigt eine Kreisgrafik. 24 Bereiche im Kreisring dieser Grafik (Ziffern) sind als verweissensitive Bereiche einer ImageMap deklariert.

Was ist eine Imagemap
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.






   Kalender testen

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



Weitere Anpassungen

Möchten sie ... ... 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.






weiter zur Downloadseite für diesen Adventskalender