Heute möchte euch ich zeigen, wie einfach es mit HTML möglich ist, auf einem
Bild bestimmte Bereiche festzulegen. Im Beispiel verwende ich die Standort-Karte
der ppedv und erstelle für einige Standorte einen Link direkt auf dem Image.
Fangen wir mit dem einfachsten Teil an. Wir brauchen ein Image. Ich benutze
folgendes:

Jeder markierte Stadtname, wird zu einer eigenen Zone direkt auf der Karte
und somit mit einem individuellen Link belegt.
Was brauchen wir als nächstes? Nicht viel mehr als zwei simple HTML-Tags.
Den <map>-Tag und den <area>-Tag.
Der <map>-Tag dient als Anker für unser Image. Wir
legen eine Karte über unser Bild, auf dem wir dann die Bereiche einteilen
können. Eine eigene Ausgabe hat dieser Tag nicht.
Der <area>-Tag wird zur Einteilung der Bereiche
verwendet.
Schauen wir uns die Erstellung mal im Code an.
1 <img src="../Content/Bild1.jpg" alt="Standorte" usemap="#Karte" />
2
3 <map name="Karte" id="Karte">
4 <area href="Link" alt="Standort"/>
5 </map>
Das Bild wird ganz normal erstellt. Zusätzlich bekommt es ein neues Attribut.
Usemap=”#Karte” Was macht dieses Attribute nun genau? Es ist
der Link zwischen der von uns erstellten Map und dem Image. Wie wir sehen,
taucht der in usemap eingetragene Wert in der id
von Map erneut auf. Somit sind sie beide verknüpft und wir können
unserem Image nun Bereiche zuteilen.
Dies passiert im <area>-Tag. Dort gibt es die
bekannten Attribute href und alt. Über das
Attribut href wird unser weiterführender Link erstellt. Eine
ganz einfach Sache also. Natürlich ist es damit noch nicht ganz getan. Irgendwie
muss ja dem Image gesagt werden, wo welcher Bereich liegt. Dies geschieht
ebenfalls im <area>-Tag. Um diesen Bereich zu erstellen,
werden folgende zwei Attribute benötigt: shape und
coords.
Das Attribut coords enthält die genauen Koordinaten auf
unserem Image. Wo welcher Bereich anfängt und aufhört. Dies sieht wie folgt aus:
coords=”x1 y1 x2 y2”
- x1 = linkere obere Ecke, Pixel von links
- y1 = linkere obere Ecke, Pixel von oben
- x2 = rechte untere Ecke, Pixel von links
- y2 = rechte untere Ecke, Pixel von oben
Wichtig ist, dass dies ohne die richtige Belegung des
shape-Attributes nicht funktioniert. Dieses Attribut kann
folgende Werte bekommen: rect, poly, circle.
Das obere Beispiel bezieht sich auf den Wert rect. Dieser
Wert heißt nichts anderes, als das wir ein Rechteck als Bereich festlegen. Bei
circle wird ein Kreis erstellt und bei poly
ein beliebiges Vieleck. Hier auch noch einmal als Beispiel im Code:
1 <img src="../Content/Bild1.jpg" alt="Standorte" usemap="#Karte" />
2
3 <map name="Karte" id="Karte">
4 <!-- x1 = linkere obere Ecke, Pixel von links -->
5 <!-- y1 = linkere obere Ecke, Pixel von oben -->
6 <!-- x2 = rechte untere Ecke, Pixel von links -->
7 <!-- y2 = rechte untere Ecke, Pixel von oben -->
8 <area shape="rect" coords="x1 y1 x2 y2" href="Link" alt="Standort" />
9
10 <!-- x = Mittelpunkt, Pixel von links -->
11 <!-- y = Mittelpunkt, Pixel von oben -->
12 <!-- r = Radius in Pixel -->
13 <area shape="circle" coords="x, y, r" alt="Bild" href="Link" />
14
15 <!-- Ecken des Polygons -->
16 <area shape="poly" coords="x1, x2, x3, ..." alt="Bild" href="Link" />
Was wir als nächstes tun, ist die Koordinaten auf der Karte zu ermitteln.
Dies geht mit einigen Grafikprogrammen, die die entsprechenden Koordinaten der
Maus ausgeben oder wir benutzen eine Seite im Netz. http://www.maschek.hu/imagemap/imgmap
Hier können wir unser eigenes Bild einfügen und direkt auf der Seite die
einzelnen Bereiche festlegen und uns die Koordinaten einfach kopieren.
Praktisch.
Basteln wir uns das ganze im Code zusammen.
1 <img src="../Content/Bild1.jpg" alt="Standorte" usemap="#Karte" />
2 <map name="Karte" id="Karte">
3 <area shape="rect" coords="326,197,395,229" href="http://ppedv.de/microsoftexperte/Schulungszentrum/Berlin"
4 alt="Berlin" title="Friedrichstraße 187 | Haus A, 4.Etage | 10117 Berlin | 030/201430-40">
5 <area shape="rect" coords="38,254,145,287" href="http://ppedv.de/microsoftexperte/Schulungszentrum/Duesseldorf"
6 alt="Düsseldorf" title="Graf-Adolf-Straße 63 | 40210 Düsseldorf | 0211-93886 744 ">
7 <area shape="rect" coords="286,278,358,312" href="http://ppedv.de/microsoftexperte/Schulungszentrum/Leipzig"
8 alt="Leipzig" title="Schützenstraße 2 6.OG | 04103 Leipzig | +49-341-5293-770">
9 <area shape="rect" coords="360,290,431,318" href="http://ppedv.de/microsoftexperte/Schulungszentrum/Dresden"
10 alt="Dresden" title="ppedv AG | Königstraße 5, 1.OG | 01097 Dresden | 0351 418 9973">
11 </map>
Links sind erstellt und führen uns auf die entsprechende Seite des
Standortes. Die Koordinaten bilden jeweils unsere Bereiche und per title
wird der passende Tool-Tipp erstellt.
Eine Anmerkung zum Stylen: Die <area>-Tags sind per
CSS nicht zu stylen. Sie sind nur maus-sensitive Bereiche und bilden keine
Blöcke im Dokument!
Natürlich besteht nun die Möglichkeit, mit JavaScript oder jQuery noch Events
auf die einzelnen Bereiche zu legen etc. Wer möchte, kann das einmal selbst
ausprobieren.
Hier könnt ihr euch das ganze anschauen: https://jsfiddle.net/rutLL46p/1/