Adventskalender 05 V01   stilisierter Weihnachtsbaum

Adventskalender als stilisierter Weihnachtsbaum, der bei MouseOver wenn sie möchten an jedem der 24 Tage eine unterschiedliche Information anzeigt, bevor beim Anklicken die Tagesdatei geöffnet wird. Der Kalender steht mit und ohne wechselnde Texteinblendungen zur Verfügung.

Alle Kalender ansehen

Der Adventskalender 05 ist für die Darstellung auf einer eigenen HTML-Seite gedacht. Er zeigt einen stilisierten Weihnachtsbaum mit 24 Ziffern. Die 24 Ziffern sind Klickbereiche, die bei MouseOver täglich eine unterschiedliche Nachricht als Text anzeigen und beim Anklicken die jeweilige Tagesdatei öffnen (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken. Zip-Datei herunterladen und meine 24 HTML-Musterdateien anpassen.
Für den Kalender werden farblich unterschiedliche Grafiken zur Auswahl stehen. Die Grafik hat die Abmessungen 417 x 500 Pixel. Die PopUp-Box, welche bei MouseOver erscheint, kann für jeden Tag einen unterschiedlichen Text anzeigen. Größe der Box, Hintergrundfarbe, Textgröße und -Farbe kann leicht angepasst werden. Eine Einbindung von Grafiken ist ebenfalls möglich. (siehe Demo)

Demo + Download als ZIP-Datei
Adventskalender 05	Demo	Vorschau	Download
V01 (Tagesdatei im Pop-Up-Window)	Demo	Vorschau	Download V01

• Mit der Aussicht auf ein lukratives Angebot?
• Mit der Aussicht auf einen Wissens- oder Informationsvorsprung?
• Mit einem Seitenangebot, das einen Unterhaltungswert hat?

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

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

• Die Grafik steht innerhalb einer Tabelle in der Seitenmitte
• Die 24 Ziffern sind Klickbereiche einer Image-Map
  
• Bei MouseOver erscheint dort eine PopUp-Box mit Informationen
  
• 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

// Edit-Marker PopUp-Texte :::::::::::::::::::::::::::
// tragen sie hier die Texte für die PopUp-Anzeige ein

'Klicken öffnet das<br>Türchen Nr. 1',
'Klicken öffnet das<br>Türchen Nr. 2',
'Klicken öffnet das<br>Türchen Nr. 3',
...

Die 24 Anweisungen der Anzeigeinformationen für einen bestimmten Tag müssen bis zum abschließenden Komma in einer fortlaufenden Zeile stehen und dürfen keine realen (durch die Eingabetaste eingefügten) Zeilenümbrüche enthalten!

Sonst erhalten sie die Fehlermeldung: "nicht abgeschlossene Zeichenfolgekonstante"

/* Edit-Marker 03 PopUp-Info */

.zahl {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color:#005329;
font-weight: normal;
background-color:#FFFFFF;
padding:10px;
border:2px solid #000000;
height:65px;
width:150px;
}

... left=x-10;
... top=y+10;

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