 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 (Grafik - Klickbereiche als Image-Map)
Dieser Kalender wurde fertiggestellt am 26.10.2009. Der Kalender benötigt eine Breite 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 
|
|
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 Grafik notiert. Mit einem eigenen Foto könnten Sie den Kalender daher leicht personalisieren.
Demo 04 des Kalenders 12-01 ansehen
|
|
Sreenshot Adventskalender 12-01:
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
|
|
Ab dem 07. November 2009 stelle ich Ihnen nun auch die Variante 12-02 zur Verfügung. Während Variante 01 in einem kalten Winterfarbton gehalten ist, verwende ich in Variante 02 ein warmes Weihnachts-Rot.
Der Kalender zeigt in der Kreismitte standardmäßig ein freies Foto (Quelle Wikimedia, Autor: Wildfeuer). Sie können natürlich eine eigene Grafik von 500 × 500 Pixel verwenden.
Eine kurze Anleitung finden Sie im Menü links.
Demo 1 des Kalenders 12-02 ansehen
|
|
Nein, für ein Download der Zip-Datei müssen Sie sich nicht registrieren und ich sammle auch keine Emailadressen. Wenn Sie möchten, verlinke ich Ihren Kalender in meiner Übersicht.
Kontaktformular (Emailadresse nicht erforderlich) Nutzungsbedingungen
In der Demo-Version ist die Datumsprüfung abgeschaltet!
a) 12-03 ist für die Anzeige von PDF-Dateien vorbereitet!
b) 12-04 + 12-05 sind für den Eintrag eigener Dateinamen vorbereitet! (Info im Quellcode)
Nur Version 12-03:
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! Die Dateinamen für die 24 anzuzeigenden PDF-Dateien sind im JavaScript in dieser Form eingetragen:
datei01.pdf datei02.pdf datei03.pdf datei04.pdf ... datei24.pdf
Wenn sie ihre selbst erstellten PDF-Dateien nach diesem Schema speichern (Groß-/ Kleinschrift beachten), müssen sie keine Änderungen in der Kalenderdatei vornehmen, da ich genau diese Dateinamen bereits als Standard eingetragen habe.
... weitere Versionen demnächst.
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.
Erklärung und Funktion
Der Kalender zeigt eine Kreisgrafik. 24 Bereiche im Kreisring dieser Grafik (Ziffern) 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 Kreisgrafik (Vordergrund)
1 Hintergrundgrafik
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 ausschließlich für meinen Kalender verwendet werden!
Nutzungsbedingungen
Ich stelle keine Bedingungen. Der Kalender ist frei für private und nicht private Seiten, darf also für die Verwendung auf Webseiten und CDs kostenlos heruntergeladen werden. Es wäre schön, wenn mein Link erhalten bleibt (muss aber nicht). Lediglich der Copyright-Vermerk im Schneefallscript muss erhalten bleiben.
Die Downloads wurden auf Virenfreiheit überprüft mit AviaAntivir Premium.
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 ...
- 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.
Update 2010:
UPDATE 29.11.2010 Fehler in den Varianten für eigene Dateinamen (12-04 + 12-05)
Der Fehlerteufel hatte sich eingeschlichen! In den ZIP-Dateien der Downloads für die Varianten 12-04 + 12-05 (eigene Dateinamen) befand sich bis zum 29.11.2010 um 21:45 Uhr eine fehlerhafte Kalenderdatei. Nach dem 23. Dezember konnten die Fensterchen nicht mehr geöffnet werden.
Etwa bei Zeile 200:
if(nummer>23)
{
var Info = window.open(dateiname+'.htm','Tag' .....
fehlte der Teil "name" ! Dort steht fälschlicherweise:
if(nummer>23)
{
var Info = window.open(datei+'.htm','Tag' .....
Datei "kalender12-04.htm" herunter laden
Datei "kalender12-05.htm" herunter laden
|
Home • Adventskalender • Kalender 12 • Beschreibung + Download
V 12-01
