Adventskalender Vorlage
    
 Home • Adventskalender • Kalender 10 • Beschreibung + Download Demo 10-01

 Adventskalender 10   Winterdorf

Beim Adventskalender für 2008 habe ich mir mit der Hintergrundgrafik einige Mühe gegeben. Durch die Verwendung einer zweiten Hintergrundgrafik die an den Nahtstellen genau passt, sollte der Kalender jede Fensterbreite komplett ausfüllen.

Die Vordergrundgrafik in der Version 10-01 bis 10-03 ist 800 Pixel breit und setzt eine entsprechende Bildschirm- / Fensterbreite voraus (siehe Abb. weiter unten).

Adventskalender 2008 - Tagesdatei als HTML-Datei oder Grafik-PopUp

Beim Kalender 10-01 wird als Tagesdatei eine HTML-Seite angezeigt. In den Varianten 10-02 und 10-03 täglich eine Grafik oder ein Foto.

  • HTM-Tagesdatei im PopUp-Window
  • PopUp-Window mit der Grafik
Ich empfehle den Kalender in einem neuen Browserfenster zu öffnen.

<a target="_blank" href="kalender10.htm">

Online-Adventskalender
 
Für die Tagesdateien in Variante 10-01 habe ich HTML-Dateien vorbereitet.

Bei den Varianten 10-02 und 10-03 ist die Darstellung von Grafiken vorgesehen, die in einem PopUp-Window angezeigt werden. Die Herstellung von 24 Dateien entfällt.		 Online-Adventskalender

1  Kalender 10-01  Zur Anzeige von 24 HTML-Dateien im PopUp-Window

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken ein PopUp-Window mit der jeweiligen Tagesdatei öffnen (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.
24 HTML-Dateien als Tagesdatei werden benötigt!


2  Kalender 10-02  Zur Anzeige von 24 Fotos / Grafiken im PopUp-Window

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensternummer (Tag) anzeigen und beim Anklicken ein Window mit dem jeweiligen Tagesfoto öffnen (eines von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken.

Der Adventskalender 10 Version 02 ist für die Anzeige eines Fotos / einer Grafik ohne weiteren Text in einem PopUp-Window gedacht. Er eignet sich also für die Anzeige eines Fotos an jedem der 24 Tage. Die URLs der Grafiken werden in einem Array abgelegt.
Es werden 24 Fotos aber keine 24 Tagesdateien benötigt!


3  Kalender 10-03  Zur Anzeige von 24 Fotos / Grafiken plus Text

Weil so viele Anfragen kamen: Eine Erweiterung des Kalender 10-02. Hier ist es möglich, unterhalb des Fotos / der Grafik einen zugehörigen Text anzeigen zu lassen. Dazu werden im Script neben den Adressen für 24 Grafiken dann 24 Texte eingetragen Die URLs der Grafiken werden in einem Array abgelegt.
Es werden 24 Fotos aber keine 24 Tagesdateien benötigt!




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



Ich habe eine animierte Grafik (blinkender Stern) über dem Dorf vorgesehen. Sie könnten weitere Objekte verwenden und / oder die Position verändern. ... mehr Info lesen


Aufwand Funktion Anpassungen Bedingungen Schneefall



   Kalender 10:  Vorschau - Demo - Download

Eine ohne großartige Anpassungen einsetzbare Kalenderversion. Einfach die Zip-Datei herunterladen und in einenem neuen Ordner zum Testen auspacken. Eigene Tagesdateien herstellen (oder meine 24 HTML-Musterdateien anpassen) beziehungsweise 24 Grafiken herstellen.

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


Bei den Demo-Versionen ist die Datumsprüfung inaktiv!

 Demo + Download als ZIP-Datei
VersionAnzeigeBreiteDemoKalenderDownload
10-01 HTML-PopUp 800 Pixel öffnen   öffnen    V 10-01
10-02 Bild-PopUp 800 Pixel öffnen   öffnen    Vr 10-02
10-03 Bild+Text-PopUp 800 Pixel öffnen   öffnen    V 10-03
Beispiel 800 Pixel öffnen   Demo mit 15 Türchen
 

  Aufwand: 4 Schritte zum Einbau

Wenn sie die ZIP-Datei meines Kalenders herunter laden und in einem neuen Ordner auspacken, besitzen sie einen funktionierenden Adventskalender und bei der Version 10.1 auch bereits 24 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 in einem neuen Ordner auspacken.
2)  Titeltext anpassen
3)  meine 24 HTML-Musterdateien anpassen. (nur Kalender 10-01)
3)  24 Fotos eintragen (nur Kalender 10-02)
3)  24 Fotos + Texte eintragen (nur Kalender 10-03)
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! Sie können den Adventskalender noch weiter anpassen. Informationen dazu finden sie im Menü links.




 

  Erklärung und Funktion

Als Hintergrund einer 100 % breiten Tabelle wurde eine Grafik festgelegt die gewährleistet, das ein Landschaftsbild über die gesamte Seitenbreite abgezeigt wird. In der Mitte davor, horizontal zentriert, ist die Dorf-Grafik plaziert. Ich habe versucht Hintergrundgrafik und Dorf-Grafik 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 / Grafik im Window 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.

Online-Adventskalender


  • Der Adventskalender steht innerhalb einer Tabelle in der Seitenmitte
  • Der Titel wird oberhalb angezeigt
  • Die Grafik hat Klickbereiche einer Image-Map
  • Bei MouseOver erscheint dort eine Nummer von 1 bis 24

  • a) Bei Klick wird ein Window mit der Tagesdatei geöffnet (1.htm - 24.htm)
  • b) Bei Klick wird ein Window mit der Tagesgrafik geöffnet

  • 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
  • Adventssonntagewerden angezeigt
  • Counter bis 1. Dezember wird angezeigt
  • Nach dem 1. Dezember Aufforderung zum Klicken

Im Download (ZIP-Datei) sind enthalten:

  • Adventskalender als HTML-Datei
  • 24 Musterseiten (1-htm - 24.htm)
  • 1 Musterseite Meldung 'zu früh' (00.htm)
  • 1 Musterseite Meldung 'gemogelt' (0.htm)
  • alle notwendigen Grafiken
  • kalender10.htm
  • 1.htm - 24.htm
  • 00.htm
  • 0.htm
  • dorf-2008-04.gif (Grafik)
  • stern-hell.gif (animierte Grafik)
Die Downloads wurden auf Virenfreiheit überprüft mit PandaPlatium 2007.
 


  Anpassungen

Eigentlich müssen sie lediglich den Titeltext für den Adventskalender ändern. Alles andere sollte so funktionieren. Probieren sie es aus.
Möchten sie ...
  • die PopUp-Box (Tageszahl) gestalten
  • eigene Tagedateien 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.

 

  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 Grafik (Dorf)

Die im Kalender 10 verwendete Dorf-Grafik ist 800 x 560 Pixel groß. Die Grafik ist im gleichen Ordner abgelegt. Die Grafik habe ich selbst entworfen und darf ausschließlich für meine Adventskalendervorlage verwendet werden.

Sie dürfen meine Dorf-Grafik für einen ganz pers. Adventskalender auch modifizieren. Dann muss allerdings (irgendwo) auf der Webseite oder in der Grafik ein Hinweis auf das Copyright des Originals (© Jansen) und ein Link auf clickstart.de oder die web-toolbox.net eingetragen sein.

Demo: Beispiel ansehen




 
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