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.
<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>
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:
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.
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.
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:
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.
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.