Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Verweis-sensitive Grafiken (Image Maps)

Informationsseite

nach unten Verweis-sensitive Grafiken definieren
nach unten Server-seitige verweis-sensitive Grafiken

 nach unten 

HTML 3.2XHTML 1.0MS IE 2.0Netscape 2.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Verweis-sensitive Grafiken definieren - map, area, usemap</title>
</head>
<body>

<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" title="Koblenz">
    <area shape="rect" coords="42,36,96,57"
          href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
    <area shape="rect" coords="42,59,78,80"
          href="http://www.mainz.de/" alt="Mainz" title="Mainz">
    <area shape="rect" coords="100,26,152,58"
          href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
    <area shape="rect" coords="27,113,93,134"
          href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
    <area shape="rect" coords="100,138,163,159"
          href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
    <area shape="rect" coords="207,77,266,101"
          href="http://www.wuerzburg.de/" alt="W&uuml;rzburg" title="W&uuml;rzburg">
    <area shape="rect" coords="282,62,344,85"
          href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">
    <area shape="rect" coords="255,132,316,150"
          href="http://www.nuernberg.de/" alt="N&uuml;rnberg" title="N&uuml;rnberg">
    <area shape="rect" coords="78,182,132,200"
          href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
    <area shape="rect" coords="142,169,200,193"
          href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
    <area shape="rect" coords="140,209,198,230"
          href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
    <area shape="rect" coords="187,263,222,281"
          href="http://www.ulm.de/" alt="Ulm" title="Ulm">
    <area shape="rect" coords="249,278,304,297"
          href="http://www.augsburg.de/" alt="Augsburg" title="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" title="Baden">
  </map>
</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 Seite 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 und 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="poly" 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.

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

Damit beim Überfahren einer verweis-sensitiven Fläche mit der Maus ein kleines Info-Fenster ("Tooltip") erscheint, können Sie in jeweils das Kapitel Universalattribut title="angezeigter Text" verwenden. Im Beispiel haben die title-Attribute jeweils dieselben Werte wie die alt-Attribute.

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.

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

Im <area>-Tag kommen häufig auch JavaScript-Seite 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.

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  ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

nach obennach unten

HTML 2.0XHTML 1.0MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Server-seitige verweis-sensitive Grafiken

Bei dieser Methode übermittelt der Browser lediglich die Klickposition der Maus in Pixeln an den Server, indem diese Information als normaler GET-Parameter an die URL angehängt wird, welche in dem Link definiert ist. Welche Aktion der Server daraufhin startet, hängt komplett von ihm ab.

Im Gegensatz zu dem Anschein, den die früher für diese Technik enthaltene Beschreibung von SELFHTML erweckt hat, ist für die Nutzung keinerlei Spezialprogramm erforderlich. Jede serverseitige Programmiersprache kann genutzt werden, um den URL-Parameter auszuwerten und entsprechend zu reagieren.

Die tatsächlich schlechteste Nutzung wäre in der Tat, die oben beschriebenen verweis-sensitiven Grafiken serverseitig zu realisieren. Als Nutzung denkbar wäre alles, was serverseitig einen pixelgenauen Klick auf einer Grafik erfassen muss, beispielsweise um auf einer Landkarte eine Position zu erfassen (mit zwei Klicks die Entfernung zwischen den beiden Punkten berechnen).

Die Klickkoordinaten werden in der Form ?xzahlwert,yzahlwert an die im Link aufgeführte URL angehängt (beispielsweise ?23,16. Beachten Sie bei der serverseitigen Auswertung, dass diese Form von der üblichen Methode ?x=23&y=16 abweicht und sich deshalb den üblichen Zugriffsmethoden (z.B. in PHP über das Array $_GET) entziehen kann.

Beispiel:

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

Erläuterung:

Es handelt sich also um eine schlichte Seite 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 ein auswertendes Serverprogramm, welches in der Lage ist, auf die übermittelten Klickkoordinaten zu reagieren.

Da serverseitige verweissensitive Grafiken historisch gesehen die zuerst entwickelte Form verweissensitiver Grafiken waren, gab es früher diverse Programme, denen man durch Einbindung einer passenden Definitionsdatei sagen konnte, welche Klickbereiche auf welche URL verlinken sollten. Derartige Programme sind heute ausgestorben.

Eine Alternative zur serverseitigen verweissensitiven Grafik zur Übermittlung der Klickposition ist die Verwendung von Seite Grafischen Formularbuttons (<input type="image">). Die Klickposition auf so einen Grafikbutton wird im Formular übermittelt, überdies auch etwas mundgerechter in klassischer Formularform.

 nach oben
weiter Seite Formulare definieren
zurück Seite Grafiken als Verweise
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm