Adventskalender
    
 Home • Adventskalender • Kalender 11 • Beschreibung + Download Download

 Adventskalender 11   Winterdorf 2

Durch die Auswahl unterschiedlicher Grafiken variantenreiche Online-Adventskalenderversion. Die Basisversion ist ab einer Bildschirmbreite von 950 Pixeln einsetzbar. Eine Variante für kleinere Bildschimabmessungen steht ebenfalls zur Verfügung.

Adventskalender zur Anzeige von HTML, Grafik- oder PDF-Dateien

UPDATE  20.09.2011  Kalender 11-12 mit 28 Türchen, Start 1. Adventssonntag 27.11.

Mit dem Online-Adventskalender 11 biete ich ihnen einen variantenreichen Kalender an. Bei der Anzeige der 24 Tagesdateien können sie sich für HTML-Dateien, PDF-Dateien oder Grafiken entscheiden. Die Qual der Wahl haben sie auch bei den unterschiedlichen Darstellungsformen für das Winterdorf.


   12 Varianten des Adventskalenders 11


1  Kalender 11-01  Zur Anzeige von 24 HTML-Dateien im gleichen Fenster

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken die jeweilige Tagesdatei im gleichen Fenster öffnet (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Rechts ein Screenshot der Version 11-01.

Schneestatus: Wintereinbruch 		    Online-Adventskalender


2  Kalender 11-02  Zur Anzeige von 24 HTML-Dateien im gleichen Fenster

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken die jeweilige Tagesdatei im gleichen Fenster öffnet (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Rechts ein Screenshot der Version 11-02.

Schneestatus: Winter

Weitere Versionen in Arbeit 		    Online-Adventskalender


3  Kalender 11-03  Zur Anzeige von 24 HTML-Dateien im gleichen Fenster

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken die jeweilige Tagesdatei im gleichen Fenster öffnet (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Rechts ein Screenshot der Version 11-03.

Schneestatus: Eingeschneit 		    Online-Adventskalender


4  Kalender 11-04  Zur Anzeige von 24 Grafiken im PopUp-Window

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken ein Window mit der Grafik des Tages öffnet (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Rechts ein Screenshot der Version 11-04.

Schneestatus: Winter 		    Online-Adventskalender


5  Kalender 11-05  Zur Anzeige von 24 PDF-Dateien

Ideal, wenn sie keine 24 HTML-Tagesdateien anfertigen können / möchten und täglich einen Gutschein, ein Rezept, oä. zum Ausdruck anbieten möchten. Einfach eine Word-Datei in eine PDF umwandeln und speichern. Zum Umwandeln gibt es kostenlose Werkzeuge im Netz.

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken ein Browserfenster mit der PDF-Datei des Tages öffnet (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Rechts ein Screenshot der Version 11-05.

Schneestatus: Winter 		    Online-Adventskalender


6  Kalender 11-06  Zur Anzeige von 24 HTML-Dateien im gleichen Fenster

Etwas verspieltere Grafik-Version mit der Möglichkeit ihren Ortsnamen als Layertext auf der Verkehrstafel anzeigen zu lassen. Dazu muss die Grafik nicht modifiziert werden.

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken die jeweilige Tagesdatei im gleichen Fenster öffnet (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Rechts ein Screenshot der Version 11-06.

Schneestatus: Wintereinbruch 		    Online-Adventskalender


7  Kalender 11-07  Zur Anzeige von 24 HTML-Dateien im gleichen Fenster

Steigerung der Version 11-06. Mit der Möglichkeit 3 kurze Texte (Ortsname, Sprechblasentext, Wegweiser) anzeigen zu lassen. Dazu muss die Grafik nicht modifiziert werden.

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken die jeweilige Tagesdatei im gleichen Fenster öffnet (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Rechts ein Screenshot der Version 11-07.

Schneestatus: Wintereinbruch 		    Online-Adventskalender


8  Kalender 11-08  Zur Anzeige von 24 PDF-Dateien

Kombination der Versionen 11-05 + 11-07. Mit der Möglichkeit 3 kurze Texte (Ortsname, Sprechblasentext, Wegweiser) anzeigen zu lassen. Dazu muss die Grafik nicht modifiziert werden.

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken die jeweilige Tagesdatei als PDF-Datei öffnet (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Rechts ein Screenshot der Version 11-08.

Schneestatus: Wintereinbruch 		    Online-Adventskalender


9  Kalender 11-09, 11-10, 11-11, 11-12  Anzeige 24 HTML-Dateien im PopUp-Window

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken die jeweilige Tagesdatei im PopUp-Window öffnet (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Variante für eine Darstellung ab 620 Pixel Breite (Grafik 600 Pixel + 2 × Rahmenbreite). Berücksichtigen sie zusätzlich 20 Pixel für einen evtl. Scrollbar.

Beim Adventskalender 11-09 wird eine einzige Grafik mit dem Abmessungen 600 x 404 Pixel verwendet. Er kann also wegen der geringeren Breite auch in eine Seite integriert werden. Eine Kalenderversion zum Einbau in ihre vorhandene Seitenstruktur.

Rechts ein Screenshot der Version 11-09 innerhalb eines neuen Browserfensters oder innerhalb eines Frames.

Version:
11-11 identisch mit 11-09 aber 27 Türchen!
11-12 identisch mit 11-09 aber 28 Türchen!

Online-Adventskalender



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.

Ein solche Imagemap besteht aus einem eigentlichen Bild, das ganz normal mit einem <img>-Tag definiert wird, gleichzeitig wird bei diesem ein Attribut usemap angegeben, was auf die Imagemap verweist.

Erklärungen zur ImageMap



 

   Kalender 11:  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!

 12 Varianten Demo, Vorschau + Download
VTDateiBreiteSchneeDatumCounterTageszahlDemoKalenderZip-
0124gleiches
Fenster		950 Pixel öffnen öffnen    Zip  
0224gleiches
Fenster		950 Pixel öffnen öffnen    Zip  
0324gleiches
Fenster		950 Pixel öffnen öffnen    Zip  
0424Foto
PopUp 		950 Pixel öffnen öffnen    Zip  
0524PDF
Datei 		950 Pixel öffnen öffnen Zip  
0624gleiches
Fenster		950 Pixel öffnen öffnen Zip a)
0724gleiches
Fenster		950 Pixel öffnen öffnen Zip b)
0824PDF
Datei 		950 Pixel öffnen öffnen Zip c)
0924PopUp
Window		600 Pixel öffnen öffnen Zip  
1024PopUp
Window		600 Pixel öffnen öffnen  Zip d)
1127PopUp
Window		600 Pixel öffnen öffnen  Zip e)
1228PopUp
Window		600 Pixel öffnen öffnen  Zip f)

a)  eigener Mini-Text auf dem Wegweiser
b)  3 Mini-Texte
c)  3 Mini-Texte
d)  vorbereitet für eigene Dateinamen
e)  27 Türchen - Start am 28. Nov. (1. Adventssonntag) z.B. 2010, 2021
f)  28 Türchen - Start am 27. Nov. (1. Adventssonntag) z.B. 2011, 2016


Die Downloads wurden auf Virenfreiheit überprüft.

 

  Aufwand: 4 Schritte zum Einbau

Wenn sie die ZIP-Datei den Basisversionen 11-01 bis 11-03, 11-06, 11-07, 11-09 meines Kalenders herunter laden und in einem neuen Ordner auspacken, besitzen sie einen funktionierenden Adventskalender und auch bereits 24 Tagesdateien als HTML-Datei. 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 in einem neuen Ordner auspacken.
2)  Kalender testen
3)  Titeltext anpassen
4)  24 HTML-Musterdateien anpassen (nur Version 1, 2, 3, 6, 7, 9, 11, 12)
4)  24 Fotos und Texte einbinden (nur Version 4)
4)  24 Dateinamen für die PDF-Dateien anpassen (nur Version 5 + 8)
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.




In den Grundversionen wird eine Dorf-Grafik mit den Abmessungen 950 x 640 Pixel verwendet. Daher empfehle ich den Kalender (bis auf die Version 11-09 + 11-10) in einem neuen Browserfenster anzuzeigen.
<a target="_blank" href="adventskalender-xx.htm">

Wenn der Kalender in einem eigenen Ordner steht, können sie die Kalender-HTML-Datei in 'index.htm' umbenennen, dann muss zum Aufruf in die Adresszeile des Browsers lediglich die Domain und der Pfad eingetragen werden.

http://www.meineDomain/ordnername/
statt 
http://www.meineDomain/ordnername/kalender10-v01.htm


Infos zur Anpassung der HTML-Tagesdateien finden sie Menü links: 'Tagesdateien anpassen'
 

  Erklärung und Funktion

Als Hintergrund einer 100 % breiten Tabelle (3 Tabellenzellen) wurden 3 Grafiken festgelegt die gewährleisteten, das ein Landschaftsbild über die gesamte Seitenbreite abgezeigt wird. Die mittlere Zelle (horizontal zentriert) beinhaltet als Background-Grafik ein Hintergrundbild und im Vordergrund (als Inhalt der Zelle) Dorf-Grafik. Die beiden anderen Zellen rechts und links beinhalten die Anschlussgrafiken, die gewährleisten sollen, dass die gesamte Bildschirmbreite ausgefüllt ist. Ich habe versucht Hintergrundgrafiken und Hauptgrafik so abzustimmen, das ein optisch annehmbarer Übergang entsteht. Durch diese Technik wird unabhängig von der Bildschirm- / Fensterbreite die gesamte Ansicht ausgefüllt.

24 Spots dieser Dorf-Grafik (Fenster) sind als verweissensitive Klick-Bereiche deklariert. 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 ein Window mit entsprechender Meldung. Vor Erreichen des entsprechenden Datums im Advent, lässt sich normalerweise (bei richtig eingestelltem Systemdatum) eine Tagesdatei nicht öffnen.

  • Der Adventskalender steht innerhalb einer Tabelle in der Seitenmitte
  • Der Titel wird mit CSS positioniert
  • Die Grafik hat Klickbereiche einer Image-Map
  • Bei MouseOver erscheint dort eine Nummer von 1 bis 24
  • Bei Klick wird ein Window mit der 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
  • Beim Klicken am 5. Dez. z.B. auf das Kästchen für den 12. Dez. wird 0.htm gezeigt.
  • Die Windows schließen automatisch beim nächsten Mausklick
  • Schneefallscript eingebaut  © Altan - Copyright-Info    Webseite
  • aktuelles Datum wird angezeigt
  • Counter: Tage bis Weihnachten werden angezeigt
  • Adventssonntage werden angezeigt
  • Counter bis 1. Dezember wird angezeigt
  • Nach dem 1. Dezember Aufforderung zum Klicken

  Anpassungen

Eigentlich müssen sie lediglich den Titeltext für den Adventskalender ändern. Alles andere sollte so funktionieren. Probieren sie es aus. Anleitungen und Hilfen zu den Modifikationen finden sie auf separaten Beschreibungsseiten im Menü links. Einige Modifikationen beziehen sich ledigkich auf eine bestimmte Variante

Variante Aktion Hinweise
alle Kalender testen Menü links
alle Titeltext (Überschrift) ändern Menü links
01 02 03 06 07 11 HTML-Tagesdateien anpassen Menü links
04 Fotofenster formatieren Menü links
04 Bildadressen + Text eintragen Menü links
05 08 Dateinamen eintragen Menü links
06 Text für den Wegweiser eintragen Menü links
07 Text für Ortstafel,
Sprechblase + Wegweiser eintragen 		Menü links
  Titeltext Position ändern Menü links


Weitere Anpassungen

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


 

  Nutzungsbedingungen

Für die Verwendung des Kalenders stelle ich 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.

Verwendung der Grafiken

Die im Kalender 11 verwendete Vordergrund-Grafik ist im gleichen Ordner abgelegt. Die Grafik habe ich selbst entworfen und darf ausschließlich für meine Adventskalendervorlage verwendet werden.

Natürlich können sie ihre eigenen Grafiken verwenden. Das ist, außer beim Kalender 11-09 + 11-10, nicht unbedingt simpel. Ich nutze 4 Grafiken (3 Hintergrundgrafiken und die Dorfgrafik im Vordergrund). Die beiden Hintergrundgrafiken links und rechts müssen gespiegelt werden, damit sie nahtlos an die mittlere passen.

Die Grafiken dürfen nicht ohne meine Zustimmung modifiziert werden.




   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


 
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.








NACH OBEN