Adventskalender 08   Winterlandschaft

Durch den Einsatz einer passenden, sich wiederholenden Hintergrundgrafik sollte der Kalender ab einer Bildschirmbreite von 800 Pixeln einsetzbar sein aber jede Fensterbreite komplett ausfüllen (siehe erklärende Grafik weiter unten).

Der Kalender 08 bietet ihnen nur wenige Anpassungsmöglichkeiten. Lediglich bei der Gestaltung der 24 Tagesdateien können sie ihrer Kreativität freien Lauf lassen. Beim Adventskalender 08 V01 wird eine Grafik (Dorf) verwendet, die 780 Pixel breit ist. Deshalb empfehle ich den Kalender in einem neuen Browserfenster anzuzeigen. <a target="_blank" href="kalender08.htm"> Rechts: Version 01 (mind. 780 Pixel breit)

Eine zweite Version für schmalere Webseiten ist verfügbar. Eine kleinere Grafik wird verwendet. Beim Adventskalender 08 V02 wird eine Grafik (Dorf) verwendet, die 546 Pixel breit ist. Eine Anzeige innerhalb eines Framesets ist denkbar. Die Darstellung in einem neuen Browserfenster ist ebenso möglich mit <a target="_blank" href="kalender08.htm"> Rechts: Version 02 (mind. 546 Pixel breit)

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

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

... mehr Info lesen

Aufwand

Funktion

Anpassungen

Bedingungen

Schneefall

Demo + Download als ZIP-Datei
Adventskalender08	Breite	Demo:	Vorschau	Download der ZIP-Datei
08-01 (Pop-Up-Window)	780 Pixel	Demo	öffnen	Kalender 08-01
08-02 (Pop-Up-Window)	546 Pixel	Demo	öffnen	Kalender 08-02
08-03 (gleiches Fenster)	780 Pixel	Demo	öffnen	Kalender 08-03

<a target="_blank" href="ordnername/kalenderxxxxxx.htm"> zum Adventskalender </a>

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.

Als Hintergrund einer 100% breiten Tabelle wurde eine Grafik festgelegt die gewährleistet, dass die Trennung von heller Fläche (Schnee) und blauer Fläche (Himmel) über die gesamte Seitenbreite abgezeigt wird. In der Mitte davor, horizontal zentriert, ist die Dorf-Grafik plaziert. Hintergrundgrafik und Dorf-Grafik sind so abgestimmt, das ein optisch annehmbarer Übergang entsteht. Durch diese Technik wird unabhängig von der Bildschirm- / Fensterbreite die gesamte Ansicht ausgefüllt.

• Der Adventskalender steht innerhalb einer Tabelle in der Seitenmitte
• Der Titel wird oberhalb angezeigt
• Darunter werden (datumsabhängig) Texte (Adventssonntage) angezeigt
• 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
  
• Klicken z.B. am 5. Dez. 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
• Nach dem 1. Dezember Aufforderung zum Klicken

Wie in den allgemeinen Nutzungsbedingungen für Web-Toolbox-Scripte fetsgelegt ist, dürfen sie das Kalender-Script natürlich anpassen und verändern. So könnten sie das Kalender-Beispiel für einen ganz andreren Zweck einsetzen.

<!-- Edit-Marker Headline -->

<span style="color:#FFFFFF;font-size:18px;">
Adventskalender Grundschule Würm<br><br>
</span>

Adventskalendder Titeltext ändern	Video	Download
Sie können zu diesem Thema auch ein kurzes Flash-Video ansehen. Die Datei ist allerdings 2,1 MB groß. Alternativ dazu können sie den Film (1,6 MB) auch als ZIP-Datei herunterladen.	2,1 MB	1,6 MB

In diesem Kalender habe ich eine animierte Grafik (blinkender Stern) über dem Dorf plaziert. Das ist natürlich nur eine Anregung. Sie könnten weitere Objekte verwenden und / oder die Position verändern. Schwebende Engelchen, zusätzliche Weeihnachtsbäume, Santa mit Schlitten oder am Weihnachtatag einen großen Stern. Denkbar wäre auch ein (na ja) Feuerwerk am Silvesterabend. Datenquelle: www.kneller-gifs.de

<!-- Anfang DIV blinkender Stern -->
<div id="stern" style="position:absolute;top:200px;left:430px;">
<img src="stern-hell.gif" width="25" height="31" border="0" alt="">
</div>
<!-- Ende DIV blinkender Stern -->

Für die Position entsprechende X-Y-Werte eintragen. Für Weitere Objekte gehen sie nach dem selben Schema vor und notieren ihre Codezeilen am Besten gleich unterhalb des BODY-Tags.

<!-- Anfang DIV stern02 -->
<div id="stern02" style="position:absolute;top:150px;left:500px;">
<img src="stern-gross.gif" width="100" height="100" border="0" alt="">
</div>
<!-- Ende DIV stern02 -->

• PopUp-Box (Tageszahl) gestalten
• eigene Tagedateien erstellen
• meine Musterdateien modifizieren
• den Schneefall modifizieren
• eine Musikdatei einbinden
• eigene Pfadangaben eintragen