Image in Bereiche aufteilen mit HTML

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/

Kommentare sind geschlossen