 Adventskalender 06 Ziffenanzeige
In einer Tabelle mit 24 Tabellenzellen stehen die Ziffern 1 bis 24. Diese Ziffern sind als Linkbereich deklariert. Die Tabelle hat einen CSS-formatierten Rahmen in verwandten Farbtönen.
|
|
Adventskalender mit Tageszahlen im Tabellenraster
Sie lesen gerade die Seite für den Kalender 06  Menü aller Kalender ansehen
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. |
|
|
Kalender in 2 Versionen - Vorschau - Demo - Download
Simple, leicht zu modifizierende Version, die sich auch gut für Beepwold-Hostig eignet. Einfach die Zip-Datei herunterladen und in einenem neuen Ordner zum Testen auspacken. Eigenes Motiv einbinden und meine 24 HTML-Musterdateien anpassen.
Bei den Demo-Versionen ist die Datumsprüfung inaktiv!
3 Schritte zum Einbau
1) Zip-Datei herunterladen und entpacken.
2) eigenes Hintergrundbild einbauen
3) meine 24 Tagesdateien anpassen.
Pfadangaben ändern
 17.11.2007, Option der Pfadauswahl hinzugefügt
(diese Änderungen müssen sie nur in speziellen Fällen vornehmen)
Falls die 24 + 2 Tagesdateien auf einem anderen Server liegen oder aus einem anderen Grund nicht im gleichen Ordner wie der eigentliche Kalender abgelegt wurden, können sie die Pfadangaben entsprechend eintragen.
Suchen sie im Quelltext den Edit-marker 'Pfad'
// 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 = "";
Nutzungsbedingungen
Ich stelle keine Bedingungen. Der Kalender ist frei für private und nicht private Seiten, darf also für die Verwendung auf Webseiten und CDs kostenlos heruntergeladen werden. Es wäre schön, wenn mein Link erhalten bleibt (muss aber nicht). Lediglich der Copyright-Vermerk im Schneefallscript muss erhalten bleiben.
Erklärung und Funktion
In einer Tabelle mit 24 Tabellenzellen stehen die Ziffern 1 bis 24. Diese Ziffern sind als Linkbereich deklariert. Die Tabelle ist von einer zweiten äußeren Tabelle umschlossen, für die eine Hintergrundgrafik eingebunden wurde. (Technik mit 2 Tabellen wegen der Probleme mit Hintergrundgrafiken bei älteren Browsern)
Die Links lassen sich nur an dem dazugehörigen Tag im Dezember mit Erfolg anklicken. Ausnahme: Dateien der vorhergehenden Tage können ebenfalls geöffnet werden. Dann wird die entsprechende Tagesdatei angezeigt. Ungültige Versuche wie Klicken im November oder für in der Zukunft liegenden Adventstage öffnen eine Datei mit entsprechender Meldung. Vor Erreichen des entsprechenden Datums im Advent, lässt sich normalerweise (bei richtig eingestelltem Systemdatum) eine Tagesdatei nicht öffnen.
screenshot:
Formatierung der Links (Ziffern) mit CSS
Durch die Formatierung der Links mittels CSS-Technik lassen sich die Farben und Größen der Ziffern leicht anpassen. Durch separate Festlegung der Farben für bereits besuchte Links (visited) und für den MousOver-Event (hover) lassen sich 3 unterschiedliche Farben definieren.
Die Ziffern bereits besuchter Links werden so in einer anderen Farbe angezeigt (grau). Bei MouseOver lasse ich hier die Ziffern in rot anzeigen.
.zahl {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 28px;
color: #FFFFFF;
font-weight: bold;
}
.zahl:visited {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 28px;
color: #BFBFBF;
font-weight: bold;
}
.zahl:hover {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 28px;
color: #FF0000;
font-weight: bold;
}
Hintergrundbild
Durch Austausch der Hintergrundgrafik verleihen sie dem Kalender ihre eigene Note. Finden sie im Quellcode den 'Edit-Marker 07' und tragen den Dateinamen der Grafik ein.
<!-- Edit-Marker 07 -->
<tbody><tr><td background="foto.gif">
screenshot:
Die Größe der Grafik, falls sie von den Maßen 500 x 375 Pixel abweicht, legen sie im Quellcode neu fest. Tragen sie Breite und Höhe der Grafik ein (Wert in Pixel).
<!-- Hier beginnt die innere Tabelle -->
<table style="width:500px; height:375px" cellspacing="0" ...
- 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
Im Download (ZIP-Datei) sind enthalten:
- Adventskalender als HTML-Datei (je nach Version)
- 24 Musterseiten für die Tage 1-24 als HTML-Datei
- 1 Musterseite Meldung 'zu früh' als HTML-Datei
- 1 Musterseite Meldung 'gemogelt' als HTML-Datei
- Hintergrundbild 500 x 375 Pixel
|
- kalender01.htm
- 1.htm - 24.htm
- 00.htm
- 0.htm
- foto.gif
|
Die Downloads wurden auf Virenfreiheit überprüft mit PandaPlatium 2007.
Kalender testen
Nach dem Entpacken der ZIP-Datei in einem neuen Ordner, lassen sich die Funktionen des Adventskalenders nätürlich nicht alle testen. Schließlich wird durch eine datumsprüfung verhindert, das man die Fensterchen zu früh öffnet. Zum Testen müssten sie das Systemdatum ihres Rechners vordatieren.
Info Systemdatum ver- / einstellen
Für Spielkinder :-)
Sie könnten einen zusätzlichen MouseOver-Effekt für die Tabellenzellen einbauen mit
<td
onMouseOver="style.backgroundColor='#000000';"
onMouseOut="style.backgroundColor='';" ...
Die Farbe für den Status MouseOver der Tabellenzelle legen sie wie oben (in rot) fest. Die Farbangabe für das Ereignis MouseOut bleibt leer, damit das Hintergrundbild wieder sichtbar wird. (Hier in der Demo ist kein Bild eingebunden)
Weitere Anpassungen
Möchten sie ...
- eigene Tagedateien erstellen
- meine Musterdateien modifizieren
- den Schneefall modifizieren
- eine Musikdatei einbinden
- eigene Pfadangaben eintragen
... darf ich sie auf die Anleitungen zur Modifikation hinweisen. Sie finden die Anleitungen im Menü links.
Besuchen sie vor Weihnachten doch einmal den Adventskalender der WEB-Toolbox oder der Katholischen Grundschule Würm.
Info zum Schneefall-Script
Das JavaScript für die langsam einschwebenden Schneeflocken habe ich nicht selbst geschrieben, darf aber frei verwendet werden, wenn die Copyright-Informationen unverändert bleiben!
Copyright-Informationen zum Schneefallscript von Altan
Auf der Webseite des Autors wird ausdrücklich auf die freie Verwendung und freie Weiterverbreitung des Schneefallscripts hingewiesen:
Zitat:
"This JavaScript code can be freely redistributed as long as this copyright notice
is keept unchanged. This code is used on AS-IS basis and you use it on your own
risk. Author of this code is not responsible for any damage that this code may make."
Das bedeutet:
Dieses JavaScript darf gratis weiter gegeben werden, solange der Copyright-Kommentar nicht verändert wird. Im Quelltext des Adventskalenders sollte also innerhalb des Schneefallscripts dieser Kommentar erhalten bleiben:
// 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
(Das Schneefallscript steht unmittelbar vor dem Ende-Body-Tag der HTML-Seite)
Mogeln
Hinweis: Mogeln ist auch für Besucher möglich!
Was sie zu Testzwecken können, kann auch ihr Seitenbesucher auch. Einfache aber arbeitsaufwändige Abhilfe: Täglich und kurzfristig die entsprechende Tagesdatei hoch laden.
Die im Adventskalender verwendete Datumsinformation ist immer das Datum, das am lokalen Rechner eingestellt ist. Bei einem korrekt eingestellten Datum am Computer des Seitenbesuchers (Windows: Uhrzeitanzeige in der Statuszeile rechts unten) wird auch das richtige Datum verwendet.
Aber ja, sie haben Recht wenn sie behaupten, dass man durch Verstellen des Systemdatums (z.B. auf den 24. Dezember) in der Lage ist, schon vorher alle Fenster zu öffnen.
Wenn sie versierter Webmaster sind und sich mit PHP auskennen:
Abhilfe schafft ein kleiner Trick:
Sie lesen das Datum vom Server aus (das stimmt ja immer) und übergeben das Serverdatum an das Adventskalenderscript. Dann ist Mogeln nicht mehr möglich.
Dazu benötigen sie allerdings Kenntnisse in PHP und die Adventskalenderdatei darf nicht als HTML-Datei, sondern als PHP-Datei gespeichert werden. Voraussetzung für diese Option ist natürlich, dass ihr Provider ihnen erlaubt PHP-Scripte auf dem Server auszuführen.
|
HOME
Kalender 06 V01
Unten rechts auf dem Bildschirm wird (Windows) normalerweise die Uhrzeit angezeigt. Dort kann man rechtsklicken und Kalender und Zeit ver- / einstellen.
