Adventskalender Imagemap

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

Rätsel-Adventskalender mit Raster
Der Rätsel-Adventskalender mit Raster

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

Veröffentlicht von

Cujo

Die Webmaster-Zentrale wurde im Januar 2010 von mir gegründet. Dabei haben mich 3 Internetauftritte maßgeblich beeinflusst. Zum einen die Website des t3n-Magazins, www.t3n.de, auf der immer sehr interessante Artikel zum Thema Webseitenerstellung gepostet wurden. Genau solche Artikel wollte ich auch schreiben. Dann bin ich schon seit mehreren Jahren im Homepage-Forum, www.homepage-forum.de, aktiv. Im Laufe der Zeit stellte ich fest, dass dort immer die gleichen Fragen gestellt wurden. Jedesmal darauf die gleichen Antworten zu geben, war erstens langweilig, zweitens zeitraubend und drittens hat es sich nicht gelohnt, die Fragen ausführlich zu beantworten. In der Webmaster-Zentrale greife ich jetzt oft Fragen auf, die im Homepage-Forum gestellt wurden und habe die Möglichkeit die angesprochenen Themen viel detaillierter zu behandeln. Bei wiederkehrenden Fragen poste ich dann einen Link zu einem Artikel in der Webmaster-Zentrale. Dadurch erhalten die User ausführlichere Antworten als normalerweise in einem Forum üblich. Die Idee, Informationen bereitzustellen und diese im Forum zu verlinken, habe ich von Daniel, www.homepage-faqs.de, übernommen. Daniel bezeichnet sich selbst als Forenhelfer und ist sehr aktiv im Homepage-Forum. Er hat schon zahllosen Usern mit seinen Informationen geholfen und ihnen die Grundlagen der Webseitenerstellung erklärt. Diese 3 Webauftritte hatten einen so großen Einfluss auf mich, dass ich sicher behaupten kann, dass es ohne sie die Webmaster-Zentrale nicht geben würde.

4 thoughts on “Adventskalender erstellen – Teil 1: Die Imagemap”

  1. Hallo Erik,

    das find ich super, dass Du mal erklärst, wie ein Adventskalender erstellt wird. Ich hatte auch kurz erwogen einen auf meiner bunten Seite einzustellen. Aber 1. wusste ich nicht, wie das funktioniert und 2. wäre es doch viel Arbeit gewesen, auf einen Schlag 24 Rebusse zu erstellen. Daher habe ich es dann nur bei einem Advents-Rebus belassen.

    Aber ich freue mich, dass ich mich mit einem Rebus in Deinem Kalender verewigen durfte und finde ihn auch sehr gelungen.
    Mal schaun, ob ich dort auch mal einen Gewinn abstauben kann. 😉

    Lieben Gruß
    Sylvi

  2. Huhu,
    ich bin auch dabei einen Kalender zu erstellen. Nun ist es so, dass sich meine Türchen in der Mitte des Bildes befinden. Wie bekomme ich nun die Korrdinaten heraus für die Map? :O

    Gruß,
    Maik

  3. Mit dem Attribut “shape=poly” kannst du der Imagemap beliebige Koordinaten zuordnen. Die genauen Koordinaten kannst du z. B. mit dem Meßwerkzeug des Firefox-Add-ons Web-Developer ermitteln.

    Wenn du die Mitte des Adventskalenders automatisch ermitteln willst, wirst du wohl PHP benötigen. Eine Erklärung wie das funktioniert würde an dieser Stelle aber zu weit führen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.