Vorschau: Adventskalender 08  

Der Kaleder 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 in Arbeit! 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)

In den ersten Versionen hatte sich der Fehlerteufel eingeschlichen! Bitte ersetzen sie etwa bei Zeile 133 die Ziffer 1 durch eine 2. Schießlich ist der 1. Adventssonntag am 2. Dezember. // Adventssonntage für 2007 eingetragen if (tag == 2 && monat == 11) {

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

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

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

// Edit-Marker Headline

document.write('Adventskalender Kindergarten Regenbogen

');

Im Hintergrund einer 100% breiten Tabelle steht eine Grafik die gewährleistet, das die Trennung von heller Fläche (Schnee) und blauer Fläche (Himmel) über die gesamte Seitenbreite abgezeigt wird. Im Vordergrund (als Inhalt) der Tabelle ist die transparente Grafik plaziert. 24 Spots dieser Grafik sind als verweissensitive Klick-Bereiche deklariert.

• 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

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 -->

• eigene Tagedateien erstellen
• meine Musterdateien modifizieren
• den Schneefall modifizieren
• eine Musikdatei einbinden
• eigene Pfadangaben eintragen

Adventskalender der Web-Toolbox

Info zum Schneefall-Script

 // JS Snow v0.2
 // finished on 11-10-1999 23:04 in Zagreb, Croatia.
 // modified on 06-12-2005 11:20 in Zagreb, Croatia.
 //
 // Copyright 1999,2005 Altan d.o.o.
 // http://www.altan.hr/snow/index.html
 // E-mail: snow@altan.hr