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

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)

UPDATE  16.11.2012  upload: 12:00 Uhr Kalender überarbeitet, neue Erklärungen

Online Adventskalender Script Vorlage


Der Kalender hat 24 Klickbereiche, die bei MouseOver die Fensternummer (Tageszahl) anzeigen und beim Anklicken die jeweilige Tagesdatei öffnen (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Für die eigentliche Anzeige habe ich die zwei DIV-Breiche definiert. Die transparente Kreisgrafik (500 x 500 Pixel) des Adventskalenders steht im inneren Div-Bereich. Im transparenten kreisförmigen Ausschnitt sieht man die Kalendergrafik als Hintergrundbild. Dort können Sie Ihr Foto einbinden.

Dieser Kalender wurde am 26.10.2009 veröffentlicht und zuletzt am 16.11.2014 ü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 mit Grafik

Online Adventskalender Vorlage

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

In einem 500 × 500 Pixel großen DIV-Bereich wird Ihr Foto / Ihre Grafik als Hintergrund eingebunden. Im Vordergrund ist meine transparente Kreisgrafik notiert. Mit einem eigenen Foto als Hintergrundbild 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 des Kalenders 12-01 ansehen

Online Adventskalender Vorlage

Ich stelle Ihnen nun auch die Varianten C (in rot und blau) zur Verfügung. Diese Kalender sind für die Anzeige von Tagesdateien im PDF-Format vorgesehen.

Der Kalender zeigt in der Kreismitte eine Standard-Grafik. Sie können natürlich eine eigene Grafik / ein eigenes Foto von 500 × 500 Pixel einsetzen.

Eine kurze Anleitung dazu finden Sie im Menü links.

Demo des Kalenders 12-01-C ansehen

Online Adventskalender Vorlage



Nur Version 12-01-C

In den Varianten C wird die Tagesdatei als PDF-Datei, die beiden Meldungen als HTML-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