[Übersicht]
Tutorials > Javascript > Canvas > Weihnachtskalender  

  PHP Basics
   Administrationsbereich
   Counter
   Umfrage
   Kalender
   Kontaktformular
  Javascript
   WebAudio Player
   WebAudio Player Singles
   Web-Farbmixer
   Beim Scrollen nachladen
     Canvas
      Weihnachtskalender
      BCD Uhr
      Analog Anzeigeinstrument
      Drehregler
      Schieberegler
      Schiebeschalter
     Navigation
      Registerkarten-Navigation
      Rotationsmenue
     Animation & Spiele
      Warp-Flug
      Lichtjockey
  HTML
   HTML 5 Grundgerüst
  CSS
   Responsive Tabelle






php



webhostingbanner 250x250


[Beispiel]   [Download]  

Dieser Weihnachtskalender basiert auf einer Canvas-Zeichenfläche.
Er ist als PHP-Datei ausgeführt um zum einen die Linkziele hinter den Toren nicht im Quelltext sehen zu können und zum anderen um die geöffneten Tore in einem Cookie und einer Session abspeichern zu können.

Bei einem Klick auf ein Tor wird zunächst das Datum geprüft, danach erfolgt die animierte Öffnung des Tores.
Zuletzt wird an den hinterlegten Link weitergeleitet. Das Tor bleibt danach offen stehen.
Bei der Weiterleitung wird das Datum ebenfalls durch PHP geprüft, um eine manuelle Eingabe eines anderen Links mit einer höheren ID (Tagesdatum) zu vermeiden.

Die Anordnung der Tore erfolgt bei jedem Seitenaufruf und ggf. nach jeder Größenänderung des Browserfensters zufällig und somit immer unterschiedlich. Da hat man wenigstens jedesmal etwas zu suchen...

Dem Kalender kann eine feste Höhe und Breite zugewiesen werden oder er passt sich an die Fenstergröße, abzüglich eines einstellbaren Randes an.

Die kalenderdatei wird über einen einfachen php-include eingebunden (siehe Beispielseite).
Es gibt in diesem Script auch zwei Stellen zur Konfiguration. Einmal in PHP und einmal in Javascript an unterschiedlichen Stellen im Quellcode. Die Bilder lassen sich natürlich beliebig austauschen.