Adventskalender 04

Kalender 04 V01 + V02 Der Adventskalender 04 ist für die Darstellung auf einer eigenen HTML-Seite gedacht. Er zeigt einen Weihnachtsbaum mit 24 Kugeln. Der Kalender steht mit 2 unterschiedlich großen Grafiken (Weihnachtstanne) zur Auswahl. V 01: Höhe 660 Pixel, Breite 550 Px V 02: Höhe 500 Pixel, Breite 417 Px So können sie die für sie geeignete Version (Mindestbreite) auswählen. rechts: Ansicht der Version 01 + 02

Kalender 04 V03 Eine dritte Version stellt den Baum in einem Rahmen (Tabelle) dar. Für diese Tabelle können sie ihr eigenes Hintergrundbild einbinden. Größe der verwendeten Baumgrafik: V 03: Höhe 500 Pixel, Breite 417 Px Die Breite der Tabelle mit Rahmen könnte man bis auf 420 Pixel Breite verkleinern. rechts: Ansicht der Version 03

Kalender 04 V04 Der Adventskalender 04 Version 04 ist für die Darstellung auf einer eigenen HTML-Seite gedacht. Er zeigt einen Weihnachtsbaum mit 24 Ornamenten. Größe der verwendeten Baumgrafik: V 05: Höhe 500 Pixel, Breite 471 Px Mindestbreite der Seite: 480 Px In den Versionen 04 + 05 wird erst bei MouseOver die Tageszahl angezeigt. (V01 - V03 haben numerierte Kugeln)

Kalender 04 V05 In der Funktion identisch mit Version 04. Der Baum wurde hier in einem Rahmen (Tabelle) plaziert. Für diese Tabelle können sie ihr eigenes Hintergrundbild einbinden. Größe der verwendeten Baumgrafik: V 05: Höhe 500 Pixel, Breite 471 Px Die Breite der Tabelle mit Rahmen könnte man bis auf 480 Pixel verkleinern. rechts: Ansicht der Version 05

Adventskalender 04	Demo	Vorschau	Download
Version 01 (Tannenhöhe 660 Pixel)	offnen	ansehen	Kalender04-V01
Version 02 (Tannenhöhe 500 Pixel)	offnen	ansehen	Kalender04-V02
Version 03 (Tannenhöhe 500 Pixel)	offnen	ansehen	Kalender04-V03
Version 04 (Tannenhöhe 500 Pixel)	offnen	ansehen	Kalender04-V04
Version 05 (Tannenhöhe 500 Pixel)	offnen	ansehen	Kalender04-V05

Der Kalender hat 24 Klickbereiche als Imagemap, die bei MouseOver die Fensterchennummer (Tag) anzeigen und beim Anklicken die jeweilige 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

<td background="bg-800x600-02.gif" valign="middle"...

• Der Weihnachtsbaum steht innerhalb einer Tabelle in der Seitenmitte
• Die 24 Kugeln sind Klickbereiche einer Image-Map
  
• Bei MouseOver erscheint dort eine Nummer von 1 bis 24
  
• Bei Klick wird eine 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.
  
• Schneefallscript eingebaut  © Altan - Copyright-Info    Webseite
  
• Counter: Tage bis Weihnachten werden angezeigt
• Nach dem 1. Dezember Aufforderung zum Klicken

Im Download aller Versionen ist die Hintergrundgrafik 'himmel01.gif' enthalten. Die Grafik zeigt im oberen Bereich angedeutete Sterne vor einem tiefdunklen Hintergrund und am unteren Rand angedeuteten Schnee. Die Grafik ist mittels CSS-Angaben unten links angeordnet. Durch die Abmessungen von 1400 x 1050 Pixel sollte die Grafik bildschirmfüllend sein. Eine weitere Hintergrundgrafik (himmel02.gif) können sie herunterladen! Diese Grafik zeigt über den gesamten Bereich Schneeflocken vor einem tiefdunklen Hintergrund und am unteren Rand angedeuteten Schnee. Nach dem Download der alternativen Grafik und der Ablage im Ordner des Adventskalender können sie im CSS-Block die Dateibezeichnung für die Hintergrundgrafik entsprechend anpassen. Download himmel02.gif Falls sie keine der beiden Grafiken einsetzen möchten, löschen sie die Zeile für die Anweisung der Hintergrundgrafik komplett.

background:url(himmel01.gif) #273447 no-repeat bottom left fixed;

Grafik 03 mit Verlauf Die Grafik ist mittels CSS-Angaben unten links angeordnet. Abmessung von 20 x 1050 Pixel. Auch diese Hintergrundgrafik (himmel03.gif) können sie herunterladen! Die Grafik zeigt einen Farbverlauf und am unteren Rand angedeuteten Schnee. Zur Verwendung dieser Grafik müssen sie (nach dem Download der alternativen Grafik und der Ablage im Ordner des Adventskalenders) die Anweisung im CSS-Block ändern. Download himmel03.gif

background:url(himmel03.gif) #273447 bottom left fixed;

• PopUp-Box (Tageszahl) gestalten
• 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