SELFHTML: HTML / Grafik / Verweis-sensitive Grafiken (Image Maps)
Description: (SELFHTML 7.0) Wie Sie Grafiken mit verweis-sensitiven Flächen definieren können, sodaß Teile der rafik als Verweise fungieren.
Keywords: SELFHTML, HTML, Grafik, GIF, JPG, JPEG, Verweise, Hyperlinks, Image Maps, verweis-sensitiv

SELFHTML/Quickbar HTML Grafik in HTML

| ## Verweis-sensitive Grafiken (Image Maps)
| Verweis-sensitive Grafiken Verweis-sensitive Grafiken (server-sided)

## Verweis-sensitive Grafiken

Anzeigebeispiel: So sieht's aus

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:

    <map name="Testbild">
    <area shape=rect coords="1,1,249,49" href="#Anker">
    <area shape=rect coords="1,51,149,299" href="datei.htm">
    <area shape=rect coords="251,1,399,399" href="../datei.htm">
    <area shape=rect coords="151,51,249,299" href="http://www.nix.de/">
    <area shape=rect coords="1,301,249,399" nohref>
    </map>
    <img src="hypgraph.gif" usemap="#Testbild" border=0>

### Erläuterung:

Mit `<map name=>` leiten Sie die Definition der verweis-sensitiven Flächen einer Grafik ein. Hinter dem Istgleichzeichen vergeben Sie einen Namen für die verweis-sensitive Grafik. Dieser Name muß 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 Verweisanker innerhalb einer HTML-Datei. Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Benutzen Sie als Sonderzeichen höchstens den Unterstrich "_". Der Name muß in Anführungszeichen stehen. Hinter dem Namen endet das einleitende `<map>`-Tag mit `>`.

Die `<map>`-Anweisung kann an einer beliebigen Stelle innerhalb des Körpers einer HTML-Datei (also zwischen Die `<body>` und `</body>`) stehen. Die Angaben dieser Anweisung erzeugen keine Bildschirmausgabe. Es empfiehlt sich jedoch, die Anweisung 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.

Durch die Angabe `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. Die Angaben sollten in Anführungszeichen stehen. 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=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 das Ziel, also die Datei, die aufgerufen werden soll, wenn der Anwender die verweis-sensitive Fläche anklickt. Dabei gelten die gleichen Regeln wie bei Verweisen. Wenn Sie eine Fläche explizit als nicht anklickbar ausweisen wollen, können Sie dies mit dem Attribut `nohref` tun. Wenn Sie solche Angaben weglassen, sind Flächen, die nicht durch `href=` abgedeckt sind, allerdings automatisch nicht anklickbar.

Die Grafik, die verweis-sensitive Flächen haben soll, referenzieren Sie auf herkömmliche Weise mit Hilfe des `<img>`-Tags (mehr hierzu siehe unter Grafiken einbinden). Um die Grafik als verweis-sensitiv zu kennzeichnen, müssen Sie das Attribut `usemap=` (siehe obiges Beispiel) notieren. Hinter dem Istgleichzeichen geben Sie den Namen an, den Sie bei der Definition der verweis-sensitiven Flächen im einleitenden <map>-Tag vergeben haben. Der Name muß in Anführungszeichen stehen und ein `#` vorangestellt bekommen.

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

Sie können die verweis-sensitiven Flächen auch in einer anderen HTML-Datei definieren als in derjenigen, in der Sie die Grafik referenzieren. Dann müssen Sie in der Grafikreferenz bei `usemap=` den Dateinamen und das Sprungziel innerhalb der Datei angeben, wo die verweis- sensitiven Flächen definiert werden. Das funktioniert genauso wie bei Verweisen.

Um beim Überfahren einer verweissensitiven 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 vom MS Internet Explorer ab Version 4.x interpretiert. Netscape kennt diese Angabe in seiner Version 4.x noch nicht.

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

## Verweis-sensitive Grafiken (server-sided)

Bei dieser Methode ist zum Verwalten von verweis-sensitiven Grafiken eine Kommunikation zwischen WWW-Browser und Server-Rechner erforderlich. Das bedeutet, daß verweis-sensitive Grafiken mit dieser Mehtode nur online im WWW realisierbar sind (also nicht auf dem lokalen Rechner), und daß Sie in jedem Fall mit Ihrem Provider die genaue Vorgehensweise klären müssen. Der Vorteil ist, daß solche verweis-sensitiven Grafiken auch mit älteren WWW-Browsern ausführbar sind. Der Nachteil ist die umständliche Handhabung. Das W3-Konsortium rät mittlerweile von dieser Form verweis-sensitiver Grafiken ab, weil sie unnötig die Netzlast erhöht.

Das Prinzip funktioniert folgendermaßen: aufgrund eines HTML-Befehls weiß der WWW-Browser, daß es sich bei einer Grafik um eine verweis-sensitive Grafik handelt. Wenn der Anwender dann irgendwo auf die angezeigte Grafik klickt, überträgt der WWW-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 WWW-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></a>

### Erläuterung:

In der Mitte des Befehls zur Verarbeitung einer verweis-sensitiven Grafik steht der HTML-Befehl zum Einbinden einer Grafik. Im Beispiel wird die Datei "datei.gif" eingebunden. Der Befehl muß außer dem Attribut `src=` noch das Attribut `ismap` enthalten. Hierdurch wird dem Server-Rechner mitgeteilt, daß es sich um eine verweis-sensitive Grafik handelt.

Das ganze Konstrukt ist eine Grafik als Verweis. Dabei steht der Befehl für die Grafikeinbindung an der Stelle, wo bei einem normalen Textverweis der Text steht, der dem Anwender als Verweistext angeboten wird.

Das Ziel des Verweises ist jedoch 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"`.

weiter: | Browser-interne Grafik-Ressourcen
zurück: | Grafiken als Verweise

SELFHTML/Quickbar HTML Grafik in HTML

© 1998 Stefan Münz, muenz@csi.com