Adventskalender 06   Ziffenanzeige

In einer Tabelle mit 24 Tabellenzellen stehen die Ziffern 1 bis 24 als Text. Diese Ziffern sind als Link deklariert. Beim Anklicken wird die jeweilige Tagesdatei geöffnet. Die Tabelle hat einen CSS-formatierten Rahmen in verwandten Farbtönen.

Der Adventskalender 06 ist für die Darstellung auf einer eigenen HTML-Seite gedacht. Sie können sie ihr eigenes Kalenderbild als Hintergrundmotiv einbinden! Der Kalender hat 24 Klickbereiche, die beim Anklicken die jeweilige Tagesdatei öffnen (eine von 24). Ein Schneefall-Script erzeugt langsam einschwebende Schneeflocken. Unterschieden wird die Zeit vor Dezember, die Zeit vom 1. - 24 Dezember und nach dem 24. Dezember.

Der Kalender zeigt 24 Ziffern, die in einer Tabellenstruktur für den Betrachter vor dem Foto liegen. Bei MouseOver wird die jeweilige Ziffer farblich hervorgehoben (CSS), beim Anklicken die jeweilige Tagesdatei geöffnet (eine von 24). Wie die Tagesdatei angezeigt wird (PopUp-Window | neues Browserfenster | gleiches Fenster) ist abhängig von der Variante. Ein JavaScript überwacht, an welchem Tag ein Fensterchen geöffnet werden darf.

Durch Austausch der Hintergrundgrafik verleihen sie dem Kalender ihre eigene Note. Sie benötigen eine Grafik / ein Foto von 500 × 375 Pixel. Wie sie den Kalender modifizieren, um ihr eigenes Foto als Hintergrund einzubinden, lesen sie auf einer separaten Seite (siehe Menü links).

Demo + Download als ZIP-Datei
Version	Tagesdatei	Typ	Demo		Vorschau	Download
06-01	gleiches Fenster	HTML	Demo	Demo	Vorschau	ZIP-Datei
06-02	Pop-Up Window	HTML	Demo	Demo	Vorschau	ZIP-Datei
06-03	gleiches Fenster	HTML	-	-	Vorschau	ZIP-Datei	1)
06-04	Pop-Up Window	HTML	Demo	Demo	Vorschau	ZIP-Datei	2)
06-05	neues Fenster	PDF	-	-	Vorschau	ZIP-Datei

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

• Tagesdatei (HTML) im gleichen Fenster pfad = ""  (kein Unterordner)
• Tagesdatei (HTML) in einem PopUp-Window: Unterordner = pfad = "fenster/"
• Tagesdatei (PDF) in einem neuen Fenster: Unterordner = pfad = "tagesdateien-pdf"

// Edit-Marker Pfad
// hier könnte man den Pfad für die Tagesdateien eintragen (Ordner oder URL)
// Beispiele:
// pfad = "http://www.web-toolbox.net/kalender/";
// pfad = "tagesdateien/";
// pfad = "";   (bleibt leer wenn die Dateien im gleicher Ordner stehen)

pfad = "";

.zahl, .zahl:visited {
 font-family: Verdana,Arial,Helvetica,Sans-serif;
 font-size: 28px;
 color: #FFFFFF;
 font-weight: bold;
}

.zahl:hover {
 font-family: Verdana,Arial,Helvetica,Sans-serif;
 font-size: 28px;
 color: #FF0000;
 font-weight: bold;
}

• Der Adventskalender steht innerhalb einer Tabelle in der Seitenmitte
• Die Grafik ist Hintergrund einer Tabelle
  
• Ziffern sind Inhalte der Tabellenzellen und Klickbereiche
  
• Bei MouseOver ändert sich die Ziffernfarbe
  
• 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
  
• Bei Klick z.B. am 5. Dez. auf die Ziffer 12 wird 0.htm gezeigt.
  
• Schneefallscript eingebaut  © Altan - Copyright-Info    Webseite
  
• aktuelles Datum wird angezeigt
• Counter: Tage bis Weihnachten werden angezeigt
• Nach dem 1. Dezember Aufforderung zum Klicken

<td
onMouseOver="style.backgroundColor='#000000';"
onMouseOut="style.backgroundColor='';" ...

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