Adventskalender
    
HOME
Demo  ZURÜCK SITEMAP  

 Adventskalender 02

Während der Adventskalender 01 in der Regel auf einer eigenen Seite angezeigt wird, eignet sich der Adventskalender 02 (bei entsprechenden Abmessungen) auch dazu, als kleines Extra neben anderen Inhalten einer Seite eingebunden zu werden (Version 01).

Natürlich ist auch eine ganzseitige Darstellung (mit großer Grafik) inclusive Schnee möglich (Version 02).

Jeden Tag vom 1. bis 24. Dez. wird eine andere Grafik angezeigt die man anklicken kann. Dann wird die entsprechende Tagesdatei (1.htm bis 24.htm) angezeigt.
     


Sie benötigen also 24 (+2) gleichformatige Grafiken

  • eine Grafik (bild00.xxx) für die Zeit vor dem 1. Dez
  • eine Grafik (bild25.xxx) für die Zeit nach dem 24. Dez
  • 24 Grafiken (bild01.xxx - bild24.xxx) für die Adventszeit
Version 01 (Miniversion) Vorschau Kalender02 V01  Download V01
Version 02 (ganzseitig) Vorschau Kalender02 V02    Download V02
TagesdateienDemo Tagesdatei 19Demo Tagesdatei 20

Einschränkung bei dieser Version 02:  Nur die aktuelle Tagesdatei kann aufgerufen werden! Ihre Seitenbesucher müssen also täglich vorbeischauen, um kein Angebot zu verpassen. Angebote bereits abgelaufener Tage können nicht mehr abgerufen werden.


Ansicht der Version 01 als Demo rechts:
Abmessung 150 x 150 Pixel (plus Randbreite)

Ich verwende in diesem Beispiel 24 unterschiedliche Päckchen-Grafiken (im Download der Version 01 enthalten). Sie könnten natürlich auch eine andere Grafik mit Bezug zum Inhalt der öffnenden Tagesdatei anzeigen lassen.

Ihrer Phantasie sind da natürlich keine Grenzen gesetzt: Grafiken von Einkaufsüten, Tresore, Schmuckkästchen, CD-Hüllen oder was immer zu Ihrer Webseite passt. 		   



  Erklärung und Funktion

Täglich (1.-24. Dez.) wird eine andere Grafik angezeigt. Ein Klick auf die Grafik öffnet die zum Tag gehörende Datei in einem Window.

In einer Tabelle mit Rand steht eine Grafik die man anklicken kann. Der HTML-Code für diese Grafik wird von einem JavaScript geschrieben. Abhängig vom Datum wird der Dateiname für die Grafik zusammengestellt:
  • z.B. am 6. Dez. 'bild06.gif'
  • z.B. am 18. Dez 'bild18.gif'
  • für die Zeit vor dem 1. Dez. 'bild00.gif'
  • nach dem 24. Dez immer 'bild25.gif'
(Die Dateiendung 'gif' oder 'jpg' kann im Script eingestellt werden)

Nach dem gleichen Prinzip werden die zu öffnenden HTML-Dateien bestimmt:
  • für den am 6. Dez. '6.htm'
  • für den am 18. Dez '18.htm'
  • für die Zeit vor dem 1. Dez. '0.htm'
  • nach dem 24. Dez immer '25.htm'
Daraus folgt allerdings, das am 6. Dezember beim Klick auf die Grafik 06 auch nur die Datei für den Tag 6 angezeigt wird.

An jedem Tag in der Adventszeit wird nur die aktuelle Datei angezeigt!




  Eigenschaften

  • Eine Grafik steht innerhalb einer Tabelle mit Rand
  • Beim Klicken im Advent wird eine der Tagesdateien geöffnet
  • Klicken sie im November wird die Datei 0.htm gezeigt.
  • Beim Klicken nach dem 24. Dez. wird 25.htm gezeigt.
In der ganzseiteigen Darstellung (Version 02) zusätzlich:
  • Schneefallscript eingebaut  © Altan - Copyright-Info    Webseite
  • aktuelles Datum wird angezeigt
  • Counter: Tage bis Weihnachten werden angezeigt
  • Nach dem 1. Dezember Aufforderung zum Klicken



  Voraussetzungen
  • Alle 24 + 2 Grafiken haben die gleiche Größe
  • Alle 26 Grafiken sind durchnummeriert
  • Alle 26 Grafiken sind vom gleichen Grafiktyp (GIF od. JPG)
Sie können bei der Version 01 die im Download enthalten Grafiken verwenden oder setzen eigene Grafiken / Fotos ein. Neben den 24 während der Adventszeit benötigten Grafiken werden zwei weitere Grafiken benötigt, weil ja vor dem 1. Dezember und nach dem 24. Dezember ebenfalls ein Bild angezeigt werden soll.


  2 Schritte zum Einbau

  • Zip-Datei herunterladen und in einem neuen Ordner auspacken
  • meine 24 HTML-Musterdateien anpassen
Wenn sie eigene Grafiken verwenden möchten zusätzlich:
  • eigene Grafiken in den Unterordner kopieren
  • Größenangaben im Script eintragen
  • Grafiktyp GIF oder JPG im Script eintragen


  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.


  Im Download enthalten:

  • Adventskalender als HTML-Datei
  • 24 Musterseiten für die Tage 1-24 als HTML-Datei
  • 1 Musterseite Meldung 'zu früh' als HTML-Datei
  • 1 Musterseite 'nach 24. Dez' als HTML-Datei
  • 1 Bild für die Zeit vor dem 1. Dezember (bild00.gif)
  • 1 Bild für die Zeit nach dem 24. Dezember (bild05.gif)
bei Version 01 zusätzlich:
  • 24 Bilder Päckchen und Pakete (bild01.gif - bild24.gif


   Testen

Zum Aufruf aller 24 Tagesdateien, sollte das Systemdatum auf den 24. Dezember eingestellt sein. Schließlich verhindert ein JavaScript, das man die Fensterchen zu früh öffnet.

Info Systemdatum ver- / einstellen



Anpassungen / Modifikationen


  Eigene Grafiken (26)

Sie haben 26 eigene Grafiken, die alle gleich groß sind. Um eigene Grafiken zu verwenden gehen sie so vor:

1) Die Grafiken so umbenennen, das alle den Dateinamen 'bild' mit angehängter, fortlaufender Nummer haben. Die Dateinamen müssen klein geschrieben sein! Notfalls Dateien umbenennen, falls ihr Grafikprogramm sie anders speichert.

Beispiel: bild00.gif,  bild01.gif,  bild02.gif  ...  bild25.gif.

2) Grafiken in den Unterordner 'graf' kopieren und meine Grafiken überschreiben.

berücksichtigen sie dabei:
  • bild00 wird vor Dezember angezeigt
  • bild01 - bild24 wird während der Adventszeit angezeigt
  • bild25 wird nach dem 24 Dez. angezeigt
3) Daten für die Grafiken eintragen

Suchen sie im Quelltext innerhalb des JavaScripts diesen Code: 

// Abmessungen
var Breite = 150;
var Hoehe = 150;

// JPG oder GIF-Grafiken?
// Typ der Grafik gif oder jpg (Kleinschrift)
var typ = "gif";
und ändern die hier rot markierten Angaben entsprechend ihrer Bilddateien.
     

Mustergrafiken



bild00.gif



bild04.gif



bild22.gif




  Rahmenbreite / -farbe ändern

Suchen sie den Text:

"Jeden Tag ein neues Päckchen öffnen"

Unterhalb finden sie die Angaben für Breite und Grundfarbe des zweifarbigen Rahmens. 

<table style="border-width:20px; border-style:ridge; border-color:#00AFFF" ...




Weitere Anpassungen


Möchten sie ...
  • PopUp-Box (Tageszahl) gestalten
  • 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.

Adventskalender der Web-Toolbox





 

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)






NACH OBEN