Image Maps

Verweis-sensitive Grafiken

Bei diesem Bild ist ein Teil des Bildes anklickbar, andere Teile sind es nicht:

Eine erste Imagemap

Die sogenannte Image Map oder verweis-sensitive Grafik wurde durch folgenden Markup generiert :

<img alt="Eine erste Imagemap" src="images/einbild.jpg" usemap="#bildstruktur" />

<map id="bildstruktur" name="bildstruktur">
    <area shape="rect"
          coords="116,92,211,125"
          target="_blank"
          href="http://www.stiftmelk.at/"
          alt="">
    <area shape="poly"
          coords="142,225,181,165,204,200,182,234,155,234"
          title="Fahne"
          target="_blank"
          href ="https://de.wikipedia.org/wiki/Flagge_%C3%96sterreichs"
          alt="">
    <area shape="circle"
          coords="153,210,150"
          title="Leopold I. der Durchlauchtige"
          target="_self"
          href="http://www.aeiou.at/aeiou.history.gtour.babenb/000329.htm"
          alt="">
    <area shape="rect"
          coords="4,3,289,395"
          title="Babenberger-Stammbaum"
          target="_blank"
          href="https://de.wikipedia.org/wiki/Babenberger-Stammbaum"
          alt="">
</map>

Dabei ist zu beachten:

  1. Image Maps werden durch das <map> ... </map> Tag gekennzeichnet. Das obligatorische Attribut name bestimmt einen Ankernamen für die Map, id ist ein Universalattribut und ordnet einem Element einen individuellen Namen zu. (in beiden Fällen bei uns: "bildstruktur".)
  2. Die Image Map selbst ist aus <area> Tags aufgebaut, die jeweils eine Beziehung zwischen einer Zone auf dem Bildschirm und einem dazugehörigen Objekt, essentiell einer URL, herstellen.
  3. areas dürfen einander überlappen; wird ein kleineres von einem größeren überdeckt, muß das kleinere jedoch stets zuerst spezifiziert werden.
  4. areas können auch nicht-rechteckig sein.
    Varianten zu "rect": "circle", "poly"
  5. Die Koordinaten bestehen, je nach Form aus unterschiedlichen Zahlen:
    • poly: Zahlenpaare, die jeweils die Koordinaten (x, y) der einzelnen Ecken beschreiben (Beispiel oben: 142/225, 181/165, 204/200, 182/234, 155/234 = die 5 Koordinaten eines Polygons)
    • rect: Zahlenpaare, die jeweils die Koordinaten (x, y) der ersten und der gegenüberliegenden Ecke beschreiben (Beispiel oben: Erste Ecke 116/92, gegenüberliegende Ecke 211/125)
    • circle: ein Zahlenpaar, das die Koordinate des Mittelpunkts beschreibt und der Radius des Kreises (Beispiel oben: Mittelpunkt 153/210, Radius 150)
  6. Alle Koordinatenangaben sind in Pixeln anzugeben, mit dem Koordinatenursprung in der linken oberen Ecke des Bildes.
  7. Wichtiger Hinweis: in HTML benötigen die Area-Tags obligatorisch das alt="" Attribut.

Fehlermeldung

Der häufigste Fehler bei der Image Map tritt innerhalb der Koordinaten auf. Nach dem Komma darf kein Leerzeichen stehen, ansonsten gibt der Validator einen Fehler aus.

Erläuterung

Um verschiedene Formen in einer Image Map zu erfassen, kann es wie im vorliegenden Fall sinnvoll sein, eine Kreisform als <area>-Shape zu verwenden. Kreise werden durch den Wert "circle" festgelegt und bestehen regelmäßig aus 3 durch Komma getrennten Zahlenwerten: x,y (Koordinate des Kreis-Mittelpunkts), r (Radius).

Um beispielsweise eine der Fahnen zu erfassen, ist weder ein reines Rechteck noch ein Kreis wirklich geeignet. Für einen solchen Fall gibt es die Polygonform. Polygone (Vielecke) werden durch den Wert "poly" festgelegt und bestehen regelmäßig aus X*2 durch Komma getrennten Zahlenwerten: x1,y1 (1. Koordinate), x2,y2 (2. Koordinate), x3,y3 (3. Koordinate).....xn, yn (n-te Koordinate).

Durch das Attribut title=" " kann man einer <area> einen Titel zuweisen, der dann zum Beispiel als Tool-Tip beim Mouse-Over angezeigt wird.

Weitere Informationen auf w3schools: