Virtueller Adventskalender mit html

Sensitive Flächen in html

Sensitive Links in Grafiken sind Bereiche innerhalb einer Grafik oder eines Bildes, die als Link verwendet werden.
Ein Beispiel, wie das später aussehen kann, finden Sie hier (die "1" und die "2" sind klickbar). Hier eine kurze Beschreibung, wie man auf einfache Art und Weise solche sensitiven Links erstellen kann. 

Als Erstes der Quelltext des Beispiels:

Gehen wir nun die relevanten Teile des Quelltextes durch:
<map name="Adventskalender"> definiert den Namen für die Grafik. Der Name muss mit einem Buchstaben anfangen und Sonderzeichen sind zu vermeiden. Der Name kann aber unabhängig vom Dateinamen gewählt werden.
Die Form der klickbaren Fläche wird durch shape="rect" bestimmt. Möglich anstatt rect (für rectangle - Rechteck) wären circle für einen Kreis oder poly für ein Polygon.

Die Koordinaten bestimmt man durch coords="2,32,32,65". Bei einem Rechteck benötigt man wie hier vier Koordinaten, bei einem Kreis nur drei und bei einem Polygon eine unbestimmte Anzahl. Diese Koordinaten kann man mit einem beliebigen Bildbearbeitungsprogramm herausfinden. Wie man dies mit Hilfe des Freeware Programms  IrfanView macht, wird später noch erläutert.

Rechteck:
coords="x1,x2,y1,y2"
x1: Pixel von links für die linke obere Ecke
x2: Pixel von oben für die linke obere Ecke
y1: Pixel von links für die rechte untere Ecke
y2: Pixel von oben für die rechte untere Ecke

Kreis:
coords="x,y,r"
x: Pixel von links für die Mitte des Kreises
y: Pixel von oben für die Mitte des Kreises
r: Anzahl der Pixel des Radius

Polygon:
coords="x1,y1,x2,y2,..."
x: Pixel einer Ecke von links
y: Pixel einer Ecke von oben
Von der letzten definierten Ecke aus wird das Polygon automatisch geschlossen.

href="xmas1.jpg" bestimmt den Link, also die Seite, die beim Anklicken geöffnet werden soll.
Durch alt="Bildimpuls"  und title="Bildimpuls" wird ein kleiner Text angezeigt, sobald man mit der Maus über den Link bzw. die sensitive Fläche fährt.

Die Art, wie die neue Seite geöffnet werden soll, ist durch target="_blank" definiert. Lässt man diesen Ausdruck weg, wird die neue Seite im aktuellen Fenster geöffnet. Durch das "_blank" wird bewirkt, dass die neue Seite in einem neuen Fenster geöffnet wird.

Durch </map> wird die Definition der sensitiven Links abgeschlossen.

Nun wird das Bild eingebunden. Dies geschieht durch img src="adventka.jpg". Durch border="0" wird bewirkt, dass das Bild keinen Rand hat. alt="Frohe Weihnachten und ein glückliches Neues Jahr" und title="Frohe Weihnachten und ein glückliches Neues Jahr"  bewirken, dass der angegebene Text erscheint, wenn man mit der Maus über das Bild fährt. Soweit ist alles wie gewohnt. Neu hier ist nun usemap="#Adventskalender". Hier wird der Name der zu verwendenden Grafik angegeben, also der, den wir am Anfang mittels <map name="Adventskalender"> definiert haben.

Koordinaten mittels IrfanView ermitteln

Hier eine kurze Beschreibung, wie man die nötigen Koordinaten ermittelt, um wie im Beispiel eine rechteckige sensitive Fläche zu definieren.
Als erstes startet man IrfanView und lädt das Bild. (Das Programm kann man sich  hier herunterladen). Wenn man nun irgendwo ins Bild klickt und die Maustaste gedrückt hält, so sieht man in der Titelleiste von IrfanView die aktuellen Koordinaten (z.B. XY:(100,353) -> 100 Pixel von links, 353 Pixel von oben). Wenn man nun einen Kreis oder die Ecke eines Polygons will, kann man die Koordinaten direkt übernehmen. Für ein Rechteck markiert man die Stelle, die später als sensitiver Link dienen soll. Die Markierung sollte genauso groß sein, wie später die sensitive Fläche. Das Ganze sieht in etwa so aus (die Markierung bei der "1"):



In der Titelleiste sehen wir 2 Koordinaten und die Größe des Rechtecks (der Markierung) -> Selection: 2, 32; 30 x 33. Die Koordinaten 2 und 32 können direkt als x1 und x2 übernommen werden, denn sie bestimmen die linke obere Ecke. Um nun die Koordinaten der rechten unteren Ecke zu erhalten, addieren wir einfach die Größe der Markierung hinzu, also hat y1 die Koordinaten 2 + 30 (=32) und y2 hat die Koordinaten 32 + 33 (=65). So erhalten wir zusammenfassend die Koordinaten x1 = 2, x2 = 34, y1 = 32, y2 = 65 und somit später die HTML Angabe coords="2,32,32,65"

Kontakt für weitere Anfragen: Björn Breddin

zurück