 Adventskalender 14 eigenes Hintergrundbild
Zwei Grafiken sind hintereinander angeordnet. Die Grafik im Vordergrund ist im oberen Bereich transparent. So kann zum Beispiel das Foto einer Skyline als Hintergrund eingebunden werden. Mit Ihrem eigenen Foto wäre in Ortsbezug möglich.
|
|
Beschreibung, Erklärungen + Download
Der Adventskalender 14 ist für die Darstellung auf einer eigenen HTML-Seite gedacht. Sie können Ihr eigenes Kalenderbild als Hintergrundmotiv einbinden!
Der Kalender hat 24 Klickbereiche (ImageMap). Bei MouseOver wird die Fensterchennummer (Tag) angezeigt, beim Anklicken die jeweilige Tagesdatei geöffnet (eine von 24). Ein JavaScript überwacht, an welchem Tag ein Fensterchen geöffnet werden darf.
Unterschieden wird die Zeit vor Dezember, die Zeit vom 1. - 24 Dezember und nach dem 24. Dezember. |
|
 |
Wie die Tagesdatei angezeigt wird (PopUp-Window | neues Browserfenster | gleiches Fenster) ist abhängig von der gewählten Variante des Kalenders.
Der Kalender 14 zeigt eine Vordergrundgrafik, die für den Betrachter vor dem Foto liegt. Der obere Bereich der Vodergrundgrafik ist transparent.
Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.
|  |
Durch Austausch der Hintergrundgrafik verleihen sie dem Kalender ihre eigene Note. Für die Variante 01 benötigen Sie dazu eine Grafik / ein Foto von 800 × 600 Pixel. Wie sie den Kalender modifizieren, um ihr eigenes Foto als Hintergrund einzubinden, lesen sie auf einer separaten Seite (siehe Menü links: Eigene Grafik einbinden).
|
In diesem Adventskalender verwende ich ein neues Script. Die Funktionen zur Datumsanzeige, zur Datumsprüfung und für die Anzeige der Tageszahlen bei MouseOver wurden völlig überarbeitet. Version: 20. Oktober 2010
|
Erklärung und Funktion Kalender 14
Im Hintergrund einer Tabelle steht ein Motivfoto als Grafik. Im Vordergrund der Tabelle ist eine transparente Grafik plaziert. 24 Bereiche dieser Grafik sind als verweissensitive Bereiche deklariert. Bei MouseOver wird die Tageszahl (Kästchennummer) eingeblendet.
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 HTML-Datei 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.
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!
a) Kalender 14 - Variante 01 + 02
Der Adventskalender 14-01 mit den Abmessungen 800 x 600 ist für die Darstellung auf einer eigenen HTML-Seite gedacht. In diesen Varianten verwende ich als Vordergrundgrafik eine Ruine mit Krippe.
Auf der Vordergrundgrafik werden Kästchen angedeutet. Klicken öffnet die Tagesdatei in einem PopUp-Window oder innerhalb der gleichen Seite.
|
|
b) Kalender 14 - Variante 03
Der Adventskalender 14-01 mit den Abmessungen 800 x 600 ist für die Darstellung auf einer eigenen HTML-Seite gedacht. In diesen Varianten verwende ich als Vordergrundgrafik eine Häuserzeile.
Auf der Vordergrundgrafik wurden Klickbereiche (Imagemap) definiert. Bei MouseOver werden PopUps mit der Tageszahl eingeblendet, klicken öffnet die Tagesdatei.
|
|
Vorschau - Demo - Download
Einfach die Zip-Datei herunterladen und in einenem neuen Ordner zum Testen auspacken. Dann meine 24 HTML-Musterdateien anpassen. 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
Die Verwendung meiner Vorlagen ist zur Darstellung eines Adventskalenders auf privaten und nicht privaten Webseiten kostenlos. Ebenso für die Verwendung auf einer Weihnachts-CD dürfen meine Kalender kostenlos herunter geladen werden. Es wäre schön, wenn mein Link erhalten bleibt (muss aber nicht). Lediglich der Copyright-Vermerk im Schneefallscript muss erhalten bleiben.
 Wenn Sie mir eine Freude machen möchten, schicken Sie mir eine Karte mit der 'richtigen' Post. Adresse: Wilhelm Jansen, am Park 18, 52511 Geilenkirchen.
Bei den Demo-Versionen ist die Datumsprüfung inaktiv!
1) 14-01 Abmessungen: 800 x 600 Pixel - Ruine, Tagesdatei PopUp-Window
2) 14-02 Abmessungen: 800 x 600 Pixel - Ruine, Tagesdatei gleiches Fenster
3) 14-03 Abmessungen: 800 x 600 Pixel - Häuserfront, Tagesdatei PopUp-Window
Schritte zum Einbau
Wenn sie die ZIP-Datei meines Kalenders herunter laden und in einem neuen Ordner auspacken, besitzen sie einen funktionierenden Adventskalender und auch bereits 24 Vorlagen für die Tagesdateien. Die Tagesdateien sind allerdings bis auf eine kleine Grafik und der angezeigten Tageszahl (Datum) leer. Dort stellen sie ihre eigenen Inhalte ein.
1) Zip-Datei herunterladen und entpacken
2) Kalender vor der Anpassung testen (siehe Menü links)
3) eigenes Hintergrundbild einbauen (wenn sie wollen)
4) den Titeltext oberhalb des Kalenders anpassen
5) meine 24 Muster-Tagesdateien anpassen
6) Kalender testen
Nun können Sie den Kalender in Ihre Webseite einbinden. Informationen finden Sie im Menü links (Einbauanleitung):
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: Anpassungen | eigene Grafik einbinden
Weitere Anpassungen + 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 ...
- die Überschrift ändern
- eine eigene Hintergrundgrafik einbinden
- die PopUp-Box (Tageszahl) gestalten
- eigene Tagedateien erstellen
- meine Musterdateien modifizieren
- eigene Pfadangaben eintragen
- den Schneefall modifizieren
... darf ich sie auf die Anleitungen zur Modifikation im Menü links hinweisen.
Übersicht der Funktionen
- Der Adventskalender steht innerhalb einer Tabelle
- Die Skyline ist als Hintergrundbild eingebunden
- Eine transparente Grafik ist Inhalt der Tabelle (Vordergrund)
- Die Klickbereiche sind als Image-Map definiert
- Bei MouseOver erscheint dort eine Nummer von 1 bis 24
- Beim Anklicken wird die Tagesdatei geöffnet (1.htm - 24.htm)
- Angezeigt werden nur Tagesdateien des aktuellen und früheren Datums
- Bei Klick von Jan. - Nov. wird die Datei 00.htm gezeigt.
- 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
- aktuelles Datum wird angezeigt
- Tage bis zum 1. Dezember werden angezeigt oder
- Aufforderung zum Klicken (nach dem 1. Dezember)
- Counter: Tage bis Weihnachten werden angezeigt
Im Download (ZIP-Datei) sind enthalten (je nach Version):
- Adventskalender als HTML-Datei
- 24 Musterseiten für die Tage 1-24 als HTML-Datei
- 1 Musterseite Meldung 'zu früh' als HTML-Datei
- 1 Musterseite Meldung 'gemogelt' als HTML-Datei
- Vordergrundgrafik
- Hintergrundbild
- Schneeflockengrafik
|
- kalenderxxx.htm
- 1.htm - 24.htm
- 00.htm
- 0.htm
- transmap-800-01.gif
- foto-01-800.jpg
- snow08c.gif
|
Die Downloads wurden auf Virenfreiheit überprüft mit AviaAntivir Premium.
alternative Tagesdateien
Wenn Sie eine Kalendervariante zur Anzeige der Tagesdateien im PopUp-Window nutzen, können Sie einen alternativen Satz von 24 Musterdateien herunterladen. (Menü links: Tagesdateien Versionen). Bei diesen Musterdateien schließen die PopUps beim nächsten Mausklick automatisch! Eine Auto-Schließen-Anweisung im Body-Tag (onBlur) überwacht den Fokusverlust und schließt das PopUp-Window.
Das verhindert die Anzeige von mehreren PopUp-Windows gleichzeitig. Wenn Ihre Tagesdateien aber z.B. Links, Videos oder Sounddateien enthalten, kann das allerdings zu unerwünschtem Verhalten führen.
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.
|
Home • Adventskalender • Kalender14 • Beschreibung + Download
Kalender 14 V01
Unten rechts auf dem Bildschirm wird (Windows) normalerweise die Uhrzeit angezeigt. Dort kann man rechtsklicken und Kalender und Zeit ver- / einstellen.
