HTML5: Verweissensitive Graphiken
Bei verweissensitiven Graphiken handelt es sich um eine Methode, bei der zu einer Graphik Bereiche angegeben werden können, die mit Verweisen korreliert werden können – oder umgedreht, je nachdem wie man es sieht. Der graphische Bereich wird also genutzt, um als Verweis zu dienen. Mittels eines Zeigergerätes wird dazu in den entsprechenden Bereich geklickert, um den jeweiligen Verweis zu aktivieren. Liegt keine visuelle Darstellung vor, bietet (X)HTML zudem einen Mechanismus zur alternativen Darstellung aller Verweise in einer besonderen Struktur, die alternativ oder zusätzlich vom Autor verwendet werden kann.
Um eine verweissensitive Graphik zu realisieren, haben Elemente, mit denen Graphiken referenziert werden können, zwei verschiedene Attribute: ismap und usemap. Das betroffene Element ist img.
ismap kennzeichnet das Element als eine verweissensitive Graphik, die per Dienstprogramm ausgewertet wird. Der Wert des Attributes ismap ist jeweils leer, also "" oder der Name des Attributes.
usemap kennzeichnet das Element als eine anwenderseitige Graphik, die Auswertung erfolgt also bereits im Darstellungsprogramm. Auswertung bezieht sich hier auf die Zuordnung von Verweiszielen oder auszugebendem Inhalt zu Klickkoordinaten. Die Klickkoordinaten selbst werden immer vom Darstellungsprogramm ermittelt. Beide Methoden zusammen sollten nicht verwendet werden, das Verhalten ist undefiniert.
Bei verweissensitiven Graphiken per Dienstprogramm sind die Klickkoordinaten vom Darstellungsprogramm an ein Dienstprogramm zu übermitteln, welches diese dann auswerten kann. In diesem Falle sollte der Autor immer auch einen Zugang zur Antwort des Dienstprogrammes bereitstellen, wenn keine visuelle Darstellung der verweissensitiven Graphik realisiert wird.
Die Verweise bei der anwenderseitigen Methode selbst werden in einem speziellen Element map notiert und zwar darin entweder mit Elementen a oder mit den speziellen Elementen area.
Die Methode, bei der die genauen Klickkoordinaten bestimmt werden, eignet sich zum Beispiel besonders, um auf Karten zu navigieren. Die Methode, die Verweise mit Klickkoordinaten zu korrelieren, kann recht hilfreich sein, wenn man etwa zu bestimmten Bildbereichen weitere Informationen verfügbar machen will. In etwas eingeschränkterem Umfange ist dies auch mit Navigationslisten möglich, die mit CSS geeignet dekoriert werden. Eine verfeinerte Methode ist zudem mit interaktiven SVG-Dokumenten möglich, wo beliebige Kombinationen von Formen als Verweisträger dienen können. Die ausgefeilteren Methoden von SVG ermöglichen zudem auch elegantere Umsetzungen von alternativen Texten.
Man beachte auch, daß es zu Konflikten oder Funktionsstörungen kommen kann, wenn etwa bei Verwendung eines SVG-Dokumentes im referenzierten Element selbst interaktiv Verweise aufgerufen werden können.
Anwenderseitige verweissensitive Graphik Bearbeiten
Neben dem bildreferenzierenden Element img wird ein Element map (Karte) benötigt, in welchem die Verweise notiert werden. map gehört zu den transparenten Elementen, erlaubt ist darin also, was im Elternelement erlaubt ist, insbesondere sind dies Elemente area oder aber Elemente wie etwa Listen, welche Elemente a enthalten. Diese referenzierenden Elemente area oder a haben dann wieder spezielle Attribute coords und shape, mit welchen angegeben wird, wo der zugehörige referenzierende Bereich liegt und wie er aussieht. Bei a dient der Elementinhalt als Alternativtext zu dem graphischen Bereich. Bei area hingegen wird vergleichbar zu img mittels des Attributes alt der Alternativtext angegeben. Mit dem Attribut title können optional zusätzliche Informationen angegeben werden, wie von a bekannt.
Im bildreferenzierenden Element img ist das Attribut usemap notiert. Der Wert ist die URI/IRI oder der Wert des Attributes name des Elementes map, welches die zugehörige Information über die Verweise beinhaltet.
Undefiniert ist das Verhalten, wenn das bildreferenzierende Element Nachfahre eines Elementes a ist. Es ist unklar, ob dem Verweis in a gefolgt werden soll oder den Verweisen in der anwenderseitigen verweissensitiven Graphik. Sinngemäß kann man sich immer merken, daß Elemente mit Verweisfunktionalität keine Nachfahren haben sollten, die ebenfalls eine Verweisfunktionalität aufweisen. Dies gilt entsprechend, wenn die Nachfahren Bilder oder Dokumente referenzieren. Diese Dokumente sollten dann ebenfalls keine Verweisfunktionalität und Interaktivität beinhalten, wenn sie als verweissensitiver Bereich verwendet werden.
Element map Bearbeiten
map ist ein transparentes Element mit dem erforderlichen Attribut name. name wird verwendet, um das Element mit dem Attribut usemap im bildreferenzierenden Element zu referenzieren und zuzuordnen. Der Wert von name entspricht sinngemäß dem von id, ist also pro Dokument eindeutig zu wählen, anders als die Werte gleichnamiger Attribute im Dokument.
Inhalt sind also Elemente, die im Elternelement erlaubt sind.
Überlappen sich verschiedene Bereiche einer verweissensitiven Graphik, so hat jener Bereich Vorrang, der im Quelltext weiter vorne in map notiert ist. Da auch Elemente verwendet werden können, die Bereiche als inaktiv kennzeichnen, können so auch 'blinde' Bereiche oder Löcher realisiert werden, die eben nicht auf einen Klick reagieren, indem entsprechende 'blinde' Elemente ganz vorne in map notiert werden.
Element area Bearbeiten
area ist ein nicht direkt dargestelltes und leeres Element, welches innerhalb von map als Nachfahre verwendet werden kann. Wird die verweissensitive Graphik mit diesem Element realisiert, sollte unabhängig davon eine Liste mit entsprechenden Verweisen als Textalternative verfügbar gemacht werden.
Neben den allgemein verwendbaren Attributen hat das Element die spezifischen Attribute coords, shape, alt, href, hreflang, download, rel, target, type, referrerpolicy.
href, hreflang, download, rel, target, type, referrerpolicy haben die gleiche Bedeutung wie beim Element a und sind dort erläutert. Insbesondere wird also mit href das Verweisziel angegeben.
alt hat die gleiche Bedeutung wie beim Element img.
Attribute shape und coords Bearbeiten
Mit dem Attribut shape wird die Form des jeweiligen verweissensitiven Bereiches angegeben. Mögliche Werte sind 'rect' für ein Rechteck als Voreinstellung. 'circle' steht für einen Kreis, 'poly' für ein Polygon und 'default' für den gesamten Bereich.
Mit dem Attribut coords werden die Koordinaten des jeweiligen verweissensitiven Bereiches angegeben. Dabei liegt der Ursprung (0,0) im Bild links oben, positive x-Werte also nach rechts, positive y-Werte nach unten.
Die möglichen Werte hängen vom Attribut shape ab. Es handelt sich um eine Liste von kommaseparierten Längen. Beim Wert 'default' ist der Wert von coords belanglos. Die Einzelwerte sind jeweils Maße in Pixeln (ohne Einheitsangabe).
Die Koordinaten beziehen sich auf das dargestellte Bild, also einschließlich möglicher Skalierungen durch CSS-Eigenschaften. Damit es dadurch keine Zugänglichkeitsprobleme gibt, ist es also notwendig, die Größe des Bildes einerseits in Pixeln festzulegen (Auch bei SVGs) und diese Größe dann nicht zu ändern, sonst ist das Ergebnis davon abhängig, ob CSS interpretiert wird oder nicht, bei Größenangaben in Abhängigkeit vom verfügbaren Anzeigebereich auch dadurch.
Angaben in Prozent, wie in früheren Versionen wären also nützlicher als in Pixeln, wurden allerdings von den meisten Programmen nicht interpretiert, von daher wurde diese Option wohl gestrichen, was die Nutzbarkeit stark einschränkt.
Von daher ist es ratsam, für skalierte, verweissensitive Bereiche gleich auf SVG zu setzen.
| Form | Koordinaten |
|---|---|
| Rechteck ("rect") | Benötigt werden vier Werte: x1,y1, x2,y2 (x1,y1) sind die Koordinaten der linken oberen Ecke des Bildes |
| Kreis ("circle") | Benötigt werden drei Werte: x, y, r (x,y) sind die Koordinaten des Mittelpunktes des Kreises |
| Polygon ("poly") | Benötigt werden Koordinaten von n Punkten, also eine gerade Anzahl von Werten, sinnvoller Weise mindestens sechs : x1,y1, x2,y2, ..., xn,yn (x1,y1) sind die Koordinaten des Punktes der ersten Ecke. |
Am einfachsten sind die Koordinaten zu bestimmen, wenn eine Pixelgraphik mit einem Bildbearbeitungsprogramm geöffnet wird, zum Beispiel mit Gimp. Für ein SVG-Dokument eignet sich zum Beispiel auch Inkscape.
Die Koordinaten können abgelesen werden, wenn das Zeigergerät über die Bildfläche bewegt wird. Die Werte sind in der unteren Leiste des Programmes zu lesen.
Prinzipielle Verwendung:
<map name="Karte">
<area shape="" coords="" href="" alt="" title="" />
</map>
<img src="" width="" height="" border="" alt="" usemap="#Karte" />
Beispiel (der 'blinde' Kreis deckt also Teile des folgenden Rechtecks ab):
<figure>
<map name="meineStadt">
<area shape="circle" coords="1,1,10" alt="" />
<area shape="rect" coords="5,11,87,83"
href="meineStadt.html#Marienkirche"
alt="Marienkirche" title="Details zur Marienkirche" />
<area shape="rect" coords="100,113,150,170"
href="meineStadt.html#Rathaus"
alt="Rathaus" title="Details zum Rathaus" />
<!-- … -->
</map>
<img src="bilder/landkarte.png"
width="500" height="250"
alt="Meine Heimatstadt Beispielstadt"
usemap="#meineStadt" />
<figcaption>
<p>Informationen über die Stadt,
Sehenswürdigkeit einfach anklickern!
</p>
<p>Alternativ folgende Liste verwenden:</p>
<ul>
<li><a href="meineStadt.html#Marienkirche"
title="Details zur Marienkirche">Marienkirche</a></li>
<li><a href="meineStadt.html#Rathaus"
title="Details zum Rathaus">Rathaus</a></li>
<!-- … -->
</ul>
</figcaption>
</figure>
Element a Bearbeiten
Innerhalb von map können auch Elemente a stehen, um eine verweissensitive Graphik zu realisieren. Diese Konstruktion kann dann auch gut genutzt werden, um eine Verweisliste unabhängig von der verweissensitiven Graphik anzubieten. Dieser Ansatz ist recht effizient, um sowohl der Gruppe der stark graphisch orientierten Nutzer entgegenzukommen, als auch jener Gruppe der stark textorientierten Nutzer, weil für beide Gruppen zusammen die Verweisliste nur einmal angegeben wird.
Das Element a selbst wurde bereits in einem eigenen Kapitel erläutert. Damit auch eine verweissensitive Graphik realisiert werden kann, sind dann die bereits für area erläuterten Attribute shape und coords zu verwenden.
Beispiel:
<figure>
<map name="meineStadt">
<p>
<a shape="circle" coords="1,1,10"></a>
<a shape="rect" coords="5,11,87,83"
href="meineStadt.html#Marienkirche"
title="Details zur Marienkirche">Marienkirche</a>,
<a shape="rect" coords="100,113,150,170"
href="meineStadt.html#Rathaus"
title="Details zum Rathaus">Rathaus</a>,
<!-- … -->
<p>
</map>
<img src="bilder/landkarte.png"
width="500" height="250"
alt="Meine Heimatstadt Beispielstadt"
usemap="#meineStadt" />
<figcaption>Informationen über die Stadt,
Sehenswürdigkeit einfach anklickern!</figcaption>
</figure>
Verweissensitive Graphik per Dienstprogramm Bearbeiten
Bei einer verweissensitiven Graphik per Dienstprogramm wird als Attribut ismap notiert, dann können die Klickkoordinaten übermittelt werden. Eine Möglichkeit dies zu tun, besteht darin, ein Element img innerhalb von a zu notieren:
<figure>
<figcaption>
Graphik irgendwo anklickern,
um einen Ausschnitt um die Klickkoordinaten zu bekommen:
</figcaption>
<a href="MandelbrotXHTML.php">
<img src="ApfelmannPNG.php?x=1&y=0"
width="500" height="500"
alt="Mandelbrots Apfelmännchen, Zufallsausschnitt"
ismap="ismap" />
</a>
</figure>
Die Klickkoordinaten, zum Beispiel (99,111), werden vom Darstellungsprogramm an die URI/IRI hinter einem Fragezeichen angehängt, bei dem Beispiel also: 'MandelbrotXHTML.php?99,111'. Die Klickkoordinaten werden in Bildschirmpixeln er- und übermittelt. Umskalierungen per CSS oder sonstwie können also zu Änderungen des Ergebnisses führen. Wird das Bild nicht dargestellt, so kommt der Alternativtext zum Einsatz und es gibt offenbar keine Klickkoordinaten. In diesem Falle, oder wenn aus sonstigen Gründen keine Klickkordinaten ermittelt werden können, wird 0,0 gesendet. Entsprechend sollte das referenzierte Skript dann natürlich so programmiert sein, daß in solch einem Falle sinnvoller Inhalt verfügbar gemacht wird, welcher etwa beschreiben könnte, was bei diversen Klickkoordinaten für Inhalt erzeugt wird oder wie der erzeugte Inhalt von den Klickkoordinaten abhängt, gegebenenfalls mit einem Formular, wo man die Koordinaten manuell eingeben kann, falls damit dann auch sinnvoller, nicht visueller Inhalt abgerufen werden kann. Umgedreht ist es ratsam, den Bildinhalt so zu gestalten, daß es bei 0,0 entweder eine dazu passende Markierung gibt, die auf die Textalternative hinweist oder es nicht besonders attraktiv erscheint, gerade in die Ecke zu klickern.