Adventskalender erstellen – Teil 1: Die Imagemap

Auf meiner Rätselseite gibt es ja seit vorgestern einen Adventskalender mit Preisen im Wert von mehr als 1.500 Euro. Die 24 Rätsel dafür wurden von 10 Usern des Rätselforums erstellt und auch die Kalendergrafik stammt von einem Rätselforum-User. Meine Aufgabe war es, den Adventskalender zu programmieren. Wie ich dabei vorgegangen bin, beschreibe ich in diesem Artikel.

Bei der Programmierung eines Adventskalenders gibt es 2 besondere Anforderungen, die bewältigt werden müssen. Zum einen müssen die jeweiligen Tage verlinkt werden. Am einfachsten wäre es logischerweise gewesen, wenn ich dafür 24 Textlinks verwendet hätte. Aber schöner sieht es natürlich aus, wenn die Tage auf der Adventskalendergrafik angeklickt werden können. Diese Funktion habe ich mittels einer sogenannten Imagemap in HTML umgesetzt.

Die zweite Schwierigkeit ist die, dass die Türchen natürlich nur an dem dafür vorbestimmten Tag geöffnet werden dürfen. Mit HTML lässt sich da nichts mehr machen, deshalb habe ich dafür PHP verwendet.

Vorbereitung des Adventskalenders

Bevor ich mit der Programmierung starten konnte, musste ich erst mal die Zahlen auf die vorhandene Kalendergrafik setzen. Ich habe mir dafür in paint.net eine zweite Ebene erstellt und dort ein Raster konstruiert. Mit Hilfe dieses Rasters und einer dritten Ebene war es dann nicht mehr so schwierig, die 24 Zahlen so zu positionieren, dass sie gleichmäßig auf der Grafik verteilt waren. Nachdem das erledigt war, habe ich das Raster wieder entfernt, so dass die Striche auf der endgültigen Kalendergrafik nicht mehr zu sehen sind.

Die Imagemap

Bei einer Imagemap handelt es sich um eine verweis-sensitive Grafik, d. h. es lassen sich beliebige Teile einer Grafik verlinken. Diese Technik wird sehr oft für Landkarten eingesetzt, auf der man durch einen Klick auf einen Ort Informationen darüber abrufen kann. Aber auch für die Programmierung eines Adventskalenders ist eine Imagemap sehr gut geeignet.

Damit der Browser weiß, dass eine Grafik verweis-sensitiv sein soll, muss diese mit dem Attribut „usemap“ gekennzeichnet werden:

<img src="bilder/kalender.png" width="500px" height="600px" border="1" alt="Adventskalender" usemap="#Kalender" />

Bei dem Wert #Kalender handelt es sich einfach um einen Anker, der eine Verknüpfung mit dem map-Tag bildet.

Der HTML-Tag „map“ leitet die Definition einer Imagemap ein und schließt die einzelnen Verweise ein. Der Wert „name“ muss dabei natürlich der gleiche sein wie der Ankername des img-Tags.

<map name="Kalender"></map>

Für eine Imagemap gibt es den area-Tag, der 3 Verweisarten ermöglicht: Vierecke, Kreise und Polygone. Für meinen Adventskalender habe ich die Vierecke verwendet, weshalb ich die beiden anderen Arten hier nicht näher beschreibe.

<area shape="rect" coords="10,30,125,100" href="tag-04.html" alt="Tag 4" />

Das Attribut „shape“ legt die Verweisart fest, in diesem Fall ist es „rect“ für einen viereckigen Verweis. Die 4 Werte des Attributs „coords“ haben folgende Bedeutung:

• 1. Wert: Der Pixel-Wert von links für die linke obere Ecke des Vierecks
• 2. Wert: Der Pixel-Wert von oben für die linke obere Ecke des Vierecks
• 3. Wert: Der Pixel-Wert von links für die rechte untere Ecke des Vierecks
• 4. Wert: Der Pixel-Wert von oben für die rechte untere Ecke des Vierecks

Das hört sich im ersten Moment vielleicht kompliziert an, ist aber im Grunde ganz einfach. Die beiden ersten Werte bestimmen die linke obere Ecke des Vierecks. Die im Beispiel angegebenen Werte „10,30“ besagen also, dass die linke obere Ecke 10 Pixel vom linken Rand und 30 Pixel vom oberen Rand entfernt sind. Die beiden anderen Werte bezeichnen die rechte untere Ecke. Die beiden Werte „125,100“ geben an, dass die rechte untere Ecke 125 Pixel vom linken Rand und 30 Pixel vom oberen Rand entfernt ist.

Diese 4 Koordinatenangaben verbindet der Browser dann zu einem viereckigen Verweis. Für meinen Adventskalender musste ich 24 Verweise erstellen. Der komplette HTML-Code sah am Ende dann so aus:

<img src="bilder/kalender.png" width="500px" height="600px" border="1" alt="Adventskalender" usemap="#Kalender" />
<map name="Kalender">
<area shape="rect" coords="0,0,125,100" href="tag-04.html" alt="Tag 4" />
<area shape="rect" coords="126,0,250,100" href="tag-10.html" alt="Tag 10" />
...
<area shape="rect" coords="251,501,375,600" href="tag-17.html" alt="Tag 17" />
<area shape="rect" coords="376,501,500,600" href="tag-21.html" alt="Tag 21" />
</map>

Die Datumsabfrage des Adventskalenders

Näheres über die Datumsabfrage des Adventskalenders mit PHP erfahrt ihr morgen im zweiten Teil.

Adventskalender erstellen – Teil 2: Die Datumsabfrage