Verweis-sensitive Grafiken

Beispiele im WWW für verweis-sensitive Grafiken:

 Karte deutscher WWW-Server
 University of California Museum of Paleontology
 National Institute of Standards and Technology

 HTML-Dateien selbst erstellen
 Verweis-sensitive Grafiken

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 HTML-Dateien auf einem WWW-Server plazieren können und eine verweis-sensitive Grafik einsetzen möchten, fragen Sie beim Sysop des Servers 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. beim Sysop des Server-Rechners nach Beispieldateien.

Verweis-sensitive Grafik in der HTML-Datei einbinden

Beispiel

  <a href="lndkrt"><img src="landkart.gif" ismap></a>

Der Befehl zur Einbindung der Grafik wird in einen  Verweis-Befehl eingeschlossen. 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 "lndkrt".

 HTML-Dateien selbst erstellen
 Verweis-sensitive Grafiken

Verweis-sensitive Grafiken werden in HTML 3.0 mit Hilfe des  <fig>-Tags realisiert.

Beispiel

  <fig src="grafverw.gif">
  <ul>
    <li><a href="inhalt.html" shape="rect 30,20,60,16">&Uuml;berblick</A>
    <li><a href="angebote.html" shape="circle 400,400,50">Angebote</A>
    <li><a href="feedback.html" shape="polygon 160,200,170,230,300,280">Ihre Antwort auf uns</A>
  </ul>
  </fig>

• Vierecke
• Kreise
• Polygone (Vielecke mit unbestimmter Anzahl Ecken)

Die Verweise werden genau so notiert wie gewöhnliche Verweise - mit einem Unterschied: durch die Angabe shape= bestimmen Sie die verweis-sensitiven Flächen. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll.

• Ein Viereck definieren Sie mit shape="rect 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 definieren Sie mit shape="circle x,y,r"
  wobei bedeuten:
  x = Mittelpunkt, Pixel von links
  y = Mittelpunkt, Pixel von oben
  r = Radius in Pixel
  
• Ein Polygon definieren Sie mit shape="polygon x1,y1,x2,y2 ... x_n,y_n"
  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.

 HTML-Dateien selbst erstellen
 Verweis-sensitive Grafiken

Um entsprechend dieser Lösung eine verweis-sensitive Grafik zu erzeugen, brauchen Sie zwei Befehle:

• einen Befehl, mit dem die verweis-sensitiven Flächen der Grafik definiert werden
• einen Befehl, um die Grafik zu referenzieren, und um anzugeben, wo sich die Information mit der Definition der verweis-sensitiven Flächen befindet.

Beispiel

<map name="Testbild"> 
<area shape="rect" coords="1,1,249,49" href="#a1"> 
<area shape="rect" coords="1,51,149,299" href="#a2">
<area shape="rect" coords="251,1,399,399" href="#a3">
<area shape="rect" coords="151,51,249,299" href="#a4"> 
<area shape="rect" coords="1,301,249,399" nohref> 
</map>
<img src="hypgraph.gif" usemap="#Testbild" border=0>

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

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 der Angabe coords= geben Sie die Koordinaten der verweis- sensitiven Flächen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll.

• 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
• Ein Viereck (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 ... x_n,y_n"
  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.

Die Grafik, die verweis-sensitive Flächen haben soll, referenzieren Sie auf herkömmliche Weise mit Hilfe des <img>-Tags (mehr hierzu siehe unter  Grafikreferenzen). Um die Grafik als verweis-sensitiv zu kennzeichnen, müssen Sie die Zusatzangabe 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.

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.

 HTML-Dateien selbst erstellen
 Verweis-sensitive Grafiken