## Verweis-sensitive Grafiken (Image Maps)

| Verweis-sensitive Grafiken definieren Server-seitige verweis-sensitive Grafiken

## Verweis-sensitive Grafiken definieren

Verweis-sensitive Grafiken sind Grafiken, in 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:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Text des Titels</title>
    </head>
    <body>

    <h1>Schnell zur Stadt oder Region Ihrer Wahl!</h1>

    <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&uuml;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&uuml;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><img src="karte.gif" width="345" height="312" border="0" alt="Karte" usemap="#Landkarte"></p>

    </body>
    </html>

### Erläuterung:

Mit `<map name="[Name]">` leiten Sie die Definition der verweis-sensitiven Flächen einer Grafik ein. Beim `name`-Attribut vergeben Sie einen Namen für die verweis-sensitive Grafik. Dieser Name muss nichts mit dem Dateinamen der Grafik zu tun haben. Es handelt sich vielmehr um einen Ankernamen, der die gleiche Bedeutung hat wie der Name in einem Anker innerhalb einer HTML-Datei. Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (`_`), den Bindestrich (`-`), den Doppelpunkt (`:`) oder den Punkt (`.`).

Das `map`-Element kann an einer beliebigen Stelle innerhalb des Körpers einer HTML-Datei (also zwischen `<body>` und `</body>`) stehen. Es erzeugt selbst keine Bildschirmausgabe. Es empfiehlt sich jedoch, das Element an einer markanten, gesonderten Stelle innerhalb der Datei zu notieren, z.B. am Anfang oder am Ende des Dateikörpers.

Zwischen dem einleitenden `<map...>` und dem abschließenden `</map>` definieren Sie die verweis-sensitiven Flächen. Mit `<area...>` definieren Sie einzelne verweis-sensitive Flächen einer bestimmten Grafik, die Sie an einer anderen Stelle einbinden.

Mit `shape="rect"` bestimmen Sie eine viereckige Fläche, mit `shape="circle"` einen Kreis, und mit `shape="polygon"` können Sie ein beliebiges Vieleck als verweis-sensitiv definieren.

Bei `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"`) 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="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"`) 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 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. Wenn Sie eine Fläche explizit als nicht anklickbar ausweisen wollen, können Sie dies mit dem Attribut `nohref` tun (ohne Wertzuweisung). Nötig ist dies allerdings nicht, denn Flächen, die nicht durch `href=` abgedeckt sind, sind automatisch nicht anklickbar.

Mit dem `alt`-Attribut notieren Sie Alternativtext für den Fall, dass die verweis-sensitive Fläche nicht angezeigt werden kann. Dieses Attribut ist ein Pflichtattribut, d.h. Sie müssen es notieren, um gültiges HTML zu erzeugen.

Die Grafik, die verweis-sensitive Flächen haben soll, referenzieren Sie auf herkömmliche Weise mit Hilfe des `<img>`-Tags. Um die Grafik als verweis-sensitiv zu kennzeichnen, müssen Sie das Attribut `usemap=` notieren. Dieses Attribut erwartet als Wertzuweisung einen URI, der zu der Stelle führt, an der das zugehörige `map`-Element notiert ist. Normalerweise ist dieses Element in der gleichen Datei notiert. Deshalb besteht die Zuweisung einfach in einem Gatterzeichen `#` und dem Namen des Ankers, der bei `<map name=>` definiert wurde.

### Beachten Sie:

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.

Um beim Überfahren einer verweis-sensitiven Fläche mit der Maus ein kleines Fenster ("Tooltip"-Fenster) anzuzeigen, können Sie in den `<area>`-Tags jeweils das Universalattribut `title="Mein angezeigter Text"` verwenden. Dies wird allerdings nicht von allen Browsern interpretiert.

Innerhalb eines jeden `<area>`-Tags ist auch das Attribut `tabindex=` erlaubt. Die Wirkung ist die gleiche wie bei der Tabulator-Reihenfolge bei Verweisen und wird dort näher beschrieben. Ebenfalls erlaubt ist das Attribut `accesskey=`. Dies funktioniert genau wie bei Tastaturkürzeln für Verweise und wird dort näher beschrieben.

Wenn Sie XHTML-konform arbeiten, müssen Sie das `area`-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form `<area... />`.
Weitere Informationen dazu im Kapitel XHTML und HTML.

Im `<area>`-Tag kommen häufig auch JavaScript- Event-Handler zum Einsatz. Beim Aufruf von JavaScript-Funktionen mit Event-Handlern darf jedoch im `<area>`-Tag das `href`-Attribut nicht fehlen, sonst streikt der Netscape Navigator. Um das Problem zu lösen, können Sie eine Angabe notieren wie:
`<area shape="rect" coords="1,1,249,49" href="#" onclick="IhreFunktion()" alt="Kurze Beschreibung">`
Durch die Wertzuweisung `"#"` an das `href`-Attribut wird ein "leerer" Verweis erzeugt, und Netscape führt dann auch den Event-Handler (hier: `onClick=`) aus.

## Server-seitige verweis-sensitive Grafiken

Bei dieser Methode ist zum Verwalten von verweis-sensitiven Grafiken eine Kommunikation zwischen Web-Browser und Web-Server erforderlich. Der Nachteil ist, dass solche verweis-sensitive Grafiken nicht lokal in jeder Umgebung funktionieren, und dass der Server zusätzlich belastet wird. Insgesamt kann diese Methode heute als veraltet gelten und wird hier nur noch der Vollständigkeit halber erwähnt.

Das Prinzip funktioniert folgendermaßen: aufgrund eines HTML-Attributs weiß der Web-Browser, dass es sich bei einer Grafik um eine verweis-sensitive Grafik handelt. Wenn der Anwender dann irgendwo auf die angezeigte Grafik klickt, überträgt der Web-Browser die Pixelkoordinaten des Mausklicks (relativ zur oberen linken Ecke der Grafik) an eine spezielle "Imagemap"-Software auf dem Server-Rechner. Diese Software ermittelt, ob die Pixelkoordinaten innerhalb einer als verweis-sensitiv definierten Fläche der Grafik liegen. Wenn ja, ermittelt die Software, welcher Verweis dieser sensitiven Fläche zugeordnet ist. Die entsprechende Verweisadresse wird dem Web-Browser gesendet. Dieser führt den Verweis dann aus.

Wenn Sie eine verweis-sensitive Grafik nach diesem Schema einsetzen möchten, fragen Sie bei Ihrem Provider nach, welche Software zum Verarbeiten verweis-sensitiver Grafiken auf diesem Server im Einsatz ist, und was genau Sie brauchen. In der Regel brauchen Sie eine sog. "Map-Datei" und einen Eintrag in einer Konfigurationsdatei. In der Map-Datei ordnen Sie verweis-sensitive Flächen und gewünschte Verweise einander zu. In der Konfigurationsdatei ist ein Eintrag für die Server-Software nötig.

Bei der Syntax der Map-Dateien gibt es mehrere Varianten. Fragen Sie ggfs. Ihren Provider nach Beispieldateien und nach Dokumentation zu der von ihm angebotenen Variante.

Das folgende Beispiel zeigt den Teil, den Sie in der HTML-Datei notieren müssen.

### Beispiel:

    <a href="MapName"><img src="datei.gif" ismap alt="Grafik"></a>

### Erläuterung:

Es handelt sich also um eine schlichte Grafik als Verweis. Im Beispiel wird die Datei `datei.gif` auf diese Weise notiert. Das `<img>`-Tag muss das zusätzliche Attribut `ismap` enthalten. Hierdurch wird dem Server-Rechner mitgeteilt, dass es sich um eine verweis-sensitive Grafik handelt.

Das Ziel des Verweises bei `href=` ist keine Datei, sondern ein symbolischer Name, der zuvor in der oben angesprochenen Konfigurationsdatei des Server-Rechners vergeben wurde. Im Beispiel ist das der symbolische Name `"MapName"`.

| Formulare definieren
| Grafiken als Verweise

© 2001 selfhtml@teamone.de