HTML/Multimedia und Grafiken/verweissensitive Grafiken

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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 Informationen gelangen als durch lange verbale Verweislisten.

  • HTML 4.0
  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Inhaltsverzeichnis

[Bearbeiten] verweissensitive Grafiken

Beispiel ansehen …
  <img src="karte.png" width="345" height="312" 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ürzburg" title="Wü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ürnberg" title="Nü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>

[Bearbeiten] Einbindung einer Karte mit map

Mit dem <map name="Name">-Attribut leiten Sie die Definition der verweis-sensitiven Flächen einer Grafik ein. Beim name-Attribut vergeben Sie einen Namen als Ankernamen, der nichts mit dem Dateinamen der Grafik zu tun haben muss.

Beachten Sie: Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.). In HTML < 5 muss das erste Zeichen ein Buchstabe sein, danach sind auch Ziffern erlaubt.


Das map-Element kann an einer beliebigen Stelle innerhalb des Körpers einer HTML-Datei sein 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.

[Bearbeiten] Festlegen einer verweissensitiven Fläche mit area

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.

Beachten Sie: Wenn Sie xhtml-konform arbeiten, müssen Sie die area-Tags als inhaltsleer <area … /> kennzeichnen.

Mit dem shape-Attribut legen Sie die Form der Fläche fest:

  • shape="rect": eine rechteckige Fläche
  • shape="circle" einen Kreis
  • shape="poly" definiert ein beliebiges Vieleck

Mit dem coords-Attribut 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
    • 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
    • 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
    • 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.

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, ein sogenannter Tooltip erscheint, können Sie jeweils das Universalattribut title verwenden. Im Beispiel haben die title-Attribute jeweils dieselben Werte wie die alt-Attribute.

Beachten Sie: Sie sollten keine wichtigen Informationen im title-Attribut unterbringen, da Sie nicht sicherstellen können, dass der Tooltip auch angezeigt wird.

Die Grafik, die verweis-sensitive Flächen haben soll, referenzieren Sie auf herkömmliche Weise mit Hilfe des img-Elements. 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.

Innerhalb eines jeden <area>-Tags ist auch das Attribut tabindex erlaubt, mit dem Sie von einem Link zum nächsten mit der Tabulatortaste springen können. Ebenfalls erlaubt ist das Attribut accesskey. Dies funktioniert genau wie bei Tastaturkürzeln als Verweise und wird dort näher beschrieben.

[Bearbeiten] praktische Überlegungen

[Bearbeiten] Wie erhalte ich die Pixelkoordinaten?

Die gewünschten Pixelkoordinaten für die jeweiligen verweissensitiven Flächen einer Grafik erhalten Sie nur indirekt. Sie können beispielsweise ein Grafikprogramm benutzen, bei dem Sie mit der Maus in der angezeigten Grafik herumfahren und dabei die genauen Pixelkoordinaten des Mauszeigers angezeigt bekommen.

In komplexeren HTML-Editoren wie Adobe Dreamweaver können Sie sie durch Klicken und Ziehen im WYSIWYG-Editor erzeugen. Des Weiteren gibt es online-Tools wie den Online Image Map Editor.

[Bearbeiten] Wie style ich die Imagemap?

Leider ist es nicht möglich, area-Elemente mit CSS so zu stylen, dass sie beim Überfahren mit der Maus oder Anklicken farblich gekennzeichnet werden. Im Live-Beispiel oben kann man es nur über den geänderten cursor des Verweises erkennen. Alternativ könnte man Javascript verwenden (<area onmouseover="BildEinblenden" onmouseout="BildAusblenden()">).

Empfehlung: Verwenden Sie eine responsive SVG-Grafik, in der Sie das Aussehen der verlinkten Flächen mit CSS festlegen können.

[Bearbeiten] responsive Imagemaps

Leider lassen sich verweis-sensitive Grafiken nicht responsiv darstellen. Sie können jedoch SVG-Grafiken mit entsprechenden verlinkten Feldern responsiv einbinden:

Diese skalieren dann passend mit.

[Bearbeiten] 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. 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>

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 ein auswertendes Serverprogramm, welches in der Lage ist, auf die übermittelten Klickkoordinaten zu reagieren.

Da serverseitige verweis-sensitive Grafiken historisch gesehen die zuerst entwickelte Form verweis-sensitiver 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 verweis-sensitiven Grafik zur Übermittlung der Klickposition ist die Verwendung von grafischen Formularbuttons (<input type="image">). Die Klickposition auf so einem Grafikbutton wird im Formular übermittelt, überdies auch etwas mundgerechter in klassischer Formularform.


[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML