Image-Maps (verweissensitive Grafiken)

Image-Maps bzw. verweis-sensitive Grafiken sind Grafiken, bei denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt. Auf diese Weise kann der Anwender in einigen Fällen wesentlich intuitiver und schneller zu Information gelangen als durch lange verbale Verweislisten.

Beispiel

<h1>Schnell zur Stadt oder Region Ihrer Wahl!</h1>
 
<p>
  <img src="karte.png" width="345" height="312" border="0" 
            alt="Karte" usemap="#Landkarte">
  <map name="Landkarte">
    <area shape="rect" coords="11,10,59,29"
          href="http://www.koblenz.de/" alt="Koblenz">
    <area shape="rect" coords="42,36,96,57"
          href="http://www.wiesbaden.de/" alt="Wiesbaden">
    <area shape="rect" coords="42,59,78,80"
          href="http://www.mainz.de/" alt="Mainz">
    <area shape="rect" coords="100,26,152,58"
          href="http://www.frankfurt.de/" alt="Frankfurt">
    <area shape="rect" coords="27,113,93,134"
          href="http://www.mannheim.de/" alt="Mannheim">
    <area shape="rect" coords="100,138,163,159"
          href="http://www.heidelberg.de/" alt="Heidelberg">
    <area shape="rect" coords="207,77,266,101"
          href="http://www.wuerzburg.de/" alt="Würzburg">
    <area shape="rect" coords="282,62,344,85"
          href="http://www.bamberg.de/" alt="Bamberg">
    <area shape="rect" coords="255,132,316,150"
          href="http://www.nuernberg.de/" alt="Nürnberg">
    <area shape="rect" coords="78,182,132,200"
          href="http://www.karlsruhe.de/" alt="Karlsruhe">
    <area shape="rect" coords="142,169,200,193"
          href="http://www.heilbronn.de/" alt="Heilbronn">
    <area shape="rect" coords="140,209,198,230"
          href="http://www.stuttgart.de/" alt="Stuttgart">
    <area shape="rect" coords="187,263,222,281"
          href="http://www.ulm.de/" alt="Ulm">
    <area shape="rect" coords="249,278,304,297"
          href="http://www.augsburg.de/" alt="Augsburg">
    <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
          href="http://www.baden-aktuell.de/" alt="Baden">
  </map>
</p>

Erläuterung

Das Beispiel enthält eine Grafik mit einem Kartenausschnitt von Süddeutschland. Die Grafik wird so verweis-sensitiv gemacht, dass die größeren Städte auf der Karte anklickbar sind. Die Links führen zu den jeweiligen Städte-Portalen im Internet.

Eine Grafik, die verweis-sensitive Flächen enthalten soll, referenzieren Sie wie gewohnt mit Hilfe des <img>-Tags. Um die Grafik als verweis-sensitiv zu kennzeichnen, notieren Sie im <img>-Tag das Attribut usemap. Dieses Attribut erwartet als Wertzuweisung eine URL-Adresse. Mit # und einem Namen wird ein Ankername im gleichen Dokument referenziert, was eine gültige URL-Adresse ist.

Der Anker ist ein map-Element. Dieses Element wird durch <map name="Ankername">…</map> markiert, der dann durch <img usemap="#Ankername"> referenziert werden kann. Beim name-Attribut vergeben Sie einen Namen für die verweis-sensitive Grafik. Vergeben Sie keine zu langen Namen. Der Name darf keine Leerzeichen enthalten. Am sichersten ist es, wenn Sie sich beim Namen auf Buchstaben von a bis z, die Ziffern 0 bis 9 und den Unterstrich (_) beschränken.

Ein map-Element können Sie überall im Dokument notieren, wo Sie auch gewöhnlichen Text notieren können. Es empfiehlt sich, das Element an einer markanten, gesonderten Stelle zu notieren, z.B. am Anfang oder am Ende des Dokumentkörpers. Es spielt keine Rolle, ob das <img>-Tag vor oder hinter dem map-Element steht, zu dem es mit usemap eine Verbindung herstellt. Das map-Element erzeugt selbst keine Bildschirmausgabe.

Zwischen dem einleitenden <map…> und dem abschließenden </map> definieren Sie die verweis-sensitiven Bereiche für die Grafik. Dazu dient das <area>-Tag. Folgende Bereichstypen können Sie darin definieren:

  • Mit <area shape="rect"…> oder <area shape="rectangle"…>bestimmen Sie eine viereckige Fläche (Rechteck).
  • Mit <area shape="circ"…> oder <area shape="circle"…> bestimmen Sie einen Kreis.
  • Mit <area shape="poly"…> oder <area shape="polygon"…> bestimmen Sie einen Bereich mit beliebig vielen Eck-Koordinaten.

Beim Attribut coords geben Sie die Koordinaten der verweis-sensitiven Flächen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll. Trennen Sie alle Pixelwerte durch Kommata.

  • Ein Viereck (shape="rect", shape="rectangle") definieren Sie mit den Koordinaten für x1,y1,x2,y2, wobei bedeuten:
    x1 = linke obere Ecke, Pixel von links
    y1 = linke obere Ecke, Pixel von oben
    x2 = rechte untere Ecke, Pixel von links
    y2 = rechte untere Ecke, Pixel von oben
  • Einen Kreis (shape="circ", shape="circle") definieren Sie mit den Koordinaten für x,y,r, wobei bedeuten:
    x = Mittelpunkt, Pixel von links
    y = Mittelpunkt, Pixel von oben
    r = Radius in Pixel
  • Ein Polygon (shape="poly", shape="polygon") definieren Sie mit den Koordinaten x1,y1,x2,y2 … xn,yn, wobei bedeuten:
    x = Pixel einer Ecke von links
    y = Pixel einer Ecke von oben
    Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.

Mit dem Attribut href bestimmen Sie innerhalb eines <area>-Tags das Verweisziel, das aufgerufen werden soll, wenn der Anwender die verweis-sensitive Fläche anklickt. Dabei gelten die Regeln zum Referenzieren in HTML — es kann sich also um beliebige Verweisziele innerhalb oder außerhalb des eigenen Web-Projekts handeln.

Das href-Attribut ist nicht Pflicht. Wenn Sie einen Bereich definieren wollen, dem Sie beispielsweise momentan keinen Link zuordnen wollen, können Sie einfach ein <area>-Tag ohne href-Attribut notieren.

Wenn Sie ein href-Attribut notieren, ist jedoch auch die Angabe eines alt-Attributs Pflicht. Der Attributwert sollte ein Verweistext sein, wie Sie ihn zwischen <a href> und </a> notieren würden, wenn Sie anstelle des <area>-Tags einen gewöhnlichen Textverweis notieren würden. Genau solche Links werden nämlich angezeigt, falls die Grafik nicht verfügbar ist oder nicht geladen werden kann.

Weitere Hinweise

Um die gewünschten Pixelkoordinaten für verweis-sensitive Flächen einer Grafik zu erhalten, können Sie beispielsweise ein Grafikprogramm benutzen, bei dem Sie mit der Maus in der angezeigten Grafik herumfahren können und dabei die genauen Pixelkoordinaten des Mauszeigers angezeigt bekommen.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das area-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <area … />.

Beim <area>-Tag sind alle weiterführenden Möglichkeiten gewöhnlicher Hyperlinks anwendbar. Ein <area>-Tag kann also folgende zusätzlichen, semantisch nützlichen Attribute haben:

  • hreflang, um die Sprache des Verweisziels zu bestimmen. Als Angabe ist ein Sprachenkürzel erlaubt.
  • media, um anzugeben, für welche Medien das Verweisziel geeignet ist. Die Angabe sollte eine kommagetrennte Aufzählung geeigneter Medientypen, das Schlüsselwort all (steht für „alle Medientypen“), oder eine komplexere Medienangabe wie im obigen Beispiel sein. Details siehe Medienabfragen.
  • type für den MimeType des Linkziel-Dateiformats. Sinnvoll ist diese Angabe in allen Fällen, in denen das Linkziel kein HTML-Dokument ist, also beispielsweise bei Links auf PDF-Dokumente, Flashmovies, MP3-Tracks usw. Als Angabe ist ein bekannter MimeType erlaubt.

Es gibt auch die Möglichkeit serverseitiger verweis-sensitiver Grafiken. Da diese Möglichkeit in der Praxis jedoch ungenutzt blieb, wird auf eine entsprechende Beschreibung in diesem Handbuch verzichtet.

Referenzinformationen

HTML3.2 XHTML1 MSIE FFOX CHROME SAF OP

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License