Websiteentwicklung: XHTML: Imagemaps

Websiteentwicklung XHTML Verweissensitive Graphik

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 XHTML 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. Die betroffenen Elemente sind img und input, für usemap zusätzlich noch object.

ismap kennzeichnet das Element als eine verweissensitive Graphik, die per Dienstprogramm ausgewertet wird. 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 a-Elementen 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, dass 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

Neben dem bildreferenzierenden Element img, object oder input (vom type 'image' wird ein Element map (Karte) benötigt, in welchem die Verweise notiert werden. Wie die bildreferenzierenden Elemente gilt map als inzeiliges Element, enthält aber entweder die inhaltsleeren Elemente area oder aber Blockelemente wie etwa Listen, welche a-Elemente 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 ist das Attribut usemap notiert. Der Wert ist die URI oder der Fragmentidentifizierer des Elementes map, welches die zugehörige Information über die Verweise beinhaltet.

Das Problem bei input als bildreferenzierendem Element besteht darin, dass input vom type 'image' auch immer Absendeknopf eines Formulars ist, es ist aber wohl nicht definiert, ob das Bild als anwenderseitige verweissensitive Graphik oder als Absendeknopf verwendet werden soll, oder als letzteres nur für jene Bereiche, die nicht verweissensitiv sind. Folglich ist es außer zu Testzwecken nicht zu empfehlen, input für eine anwenderseitige verweissensitive Graphik zu verwenden.

Ebenfalls 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, dass 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

map ist ein inzeiliges Element mit dem erforderlichen Attribut id. id wird verwendet, um das Element mit dem Attribut usemap im bildreferenzierenden Element zu referenzieren und zuzuordnen (in XHTML 1.0 transitional kann bei Bedarf mit dem gleichen Wert auch zusätzlich das Attribut name verwendet werden, um rückwärtskompatibel zu HTML4 zu sein).

Daneben können die meisten allgemein verwendbaren Attribute verwendet werden (dir, xml:lang, Ereignisattribute, class, id, title).

Inhalt sind entweder Blockelemente oder ein oder mehrere Elemente area. Formal können die auch gemischt werden, was aber nicht empfohlen wird. Durch Verwendung von Blockelementen statt area ergibt sich die Möglichkeit einer reichhaltigeren Strukturierung des alternativen Inhaltes, daher ist diese Variante der mit area vorzuziehen.

Ü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

area ist ein nicht direkt dargestelltes und leeres Element, welches innerhalb von map als Kindelement verwendet werden kann.

Neben den allgemein verwendbaren Attributen hat das Element die spezifischen Attribute coords, shape, alt, href, nohref, accesskey, tabindex und sofern XHTML+RDFa oder XHTML1.0 transitional verwendet wird auch das Attribut target.

href, accesskey, tabindex und target haben die gleiche Bedeutung wie beim Element a und sind dort erläutert. Insbesondere wird also mit href das Verweisziel angegeben.

Attribut alt

Mit dem erforderlichen Attribut alt wird ein Alternativtext zu dem Bereich der verweissensitiven Graphik notiert, die mit dem Verweis korreliert ist. Die Bedeutung ist die gleiche wie beim gleichnamigen Attribut des Elementes img, siehe dort. Der Wert ist demzufolge einfacher Text, welcher eine Alternative zum Graphikbereich darstellt. Damit ist die Zugänglichkeit und Barrierefreiheit gewährleistet, weil so die Verweise auch zugänglich bleiben, falls die verweissensitive Graphik nicht angezeigt wird.

Attribute href und nohref

Sofern das Element area kein Attribut href mit dem Verweisziel als Inhalt enthält, ist der damit korrelierte Graphikbereich 'blind'. Angeklickt erfolgt also keine Referenzierung. Da vorne notierte Elemente Vorrang haben, ist bei einem Überlapp also das 'blinde' vor dem zu notieren, welches (teilweise) verdeckt oder deaktiviert werden soll.

Optional kann zusätzlich zum Fehlen von href das Attribut nohref="nohref" notiert werden. Der Effekt ist der gleiche. Das explizite Notieren mag dem Autor aber als Hilfe und Erinnerung dienen, dass damit wirklich ein 'blinder' Bereich beabsichtigt ist.

Attribute shape und coords

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, also entweder Pixel (ohne Einheitsangabe) oder Prozentwerte (mit Angabe %), siehe entsprechende Erklärungen zu width und height von img oder object.

Genaugenommen ist nicht genau festgelegt, was '1' exakt bedeutet - es soll sich jedenfalls um einen Pixel handeln. Es könnte sich etwa um ein Maß im referenzierten Dokumnent handeln oder sich auf die Abmessungen des Bereiches beziehen, welcher im XHTML-Dokument für die Graphik reserviert ist. Die gängigen Darstellungsprogramme tendieren zu letzterer Interpretation. Hat etwa ein Element img die Attribute width und height mit einem Wert von jeweils '500', so ist (0,0) links oben und (500,500) rechts unten, unabhängig davon, welche Größenangaben gegebenenfalls im Bilddokument selbst stehen.

Die Angaben in % sind übrigens mit gängigen Darstellungsprogrammen nicht nachvollziehbar, diese scheinen einfach die Prozentangabe zu ignorieren.

Form	Koordinaten
Rechteck ("rect")	Benötigt werden vier Werte: x1,y1, x2,y2 (x1,y1) sind die Koordinaten der linken oberen Ecke des Bildes (x2,y2) sind die Koordinaten der rechten unteren Ecke
Kreis ("circle")	Benötigt werden drei Werte: x, y, r (x,y) sind die Koordinaten des Mittelpunktes des Kreises r ist der Radius 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. (x2,y2) sind die Koordinaten des Punktes der zweiten Ecke. (xn,yn) sind die Koordinaten des letzten Punktes. Der letzte Punkt wird automatisch mit dem ersten verbunden, um das Polygon zu schließen. Es wird Autoren aber empfohlen, das letzte Paar gleich dem ersten zu wählen. Das Verhalten bei Selbstüberschneidungen ist nicht festgelegt (zur Problematik von Innen und Außen vergleiche etwa das Präsentationsattribut fill-rule in SVG)

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. Nach Möglichkeit sollte das Bild später im Dokument nicht mit width und height skaliert werden, falls dessen Größe in Pixeln vorliegt. Wird doch skaliert, etwa weil die Abmessungen nicht in Pixeln vorliegen oder die Größe verändert wird, sind die Koordinaten entsprechend umzurechnen.

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 id="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):

<map id="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" />

Element a

Innerhalb von Blockelementen, die in map notiert sind, können auch a-Elemente 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 a-Element 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:

<map id="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" />

Mit dem Element object ist im Bedarfsfalle auch einfach erreichbar, dass die Liste der Verweise nur alternativ zur verweissensitiven Graphik verwendet wird, wenn diese selbst nicht dargestellt werden kann:

<object data="bilder/landkarte.png" width="500" height="250" usemap="#meineStadt">
  <map id="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>
</object>

Mit object lassen sich dann auch leicht Formate alternativ zueinander verwenden, wobei nur eine Karte (map) verwendet wird:

<object data="bilder/landkarte.jp2" width="500" height="250" usemap="#meineStadt">
 <object data="bilder/landkarte.png" width="500" height="250" usemap="#meineStadt">
  <map id="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>
 </object>
</object>

Verweissensitive Graphik per Dienstprogramm

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:

<p>
Graphik irgendwo anklickern, um einen Ausschnitt um die Klickkoordinaten zu bekommen:<br />
<a href="MandelbrotXHTML.php">
<img src="ApfelmannPNG.php?x=1&amp;y=0" width="500" height="500"
     alt="Mandelbrots Apfelmännchen, Zufallsausschnitt" ismap="ismap" />
</a>
</p>

Die Klickkoordinaten, sagen wir (99,111), werden vom Darstellungsprogramm an die URI 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, dass 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, dass 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.

ismap kann auch beim Element input verwendet werden, sofern es vom type 'image' ist.

Beispiel:

<form action="MandelbrotXHTML.php" method="get">
<p>
<input type="image"
   ismap="ismap"
   alt="Mandelbrots Apfelmännchen, Zufallsausschnitt"
   src="ApfelmannPNG.php?x=1&amp;y=0"
   name="k" />
</p>
</form>

Aus dem Wert des Attributes name, gefolgt von einem Punkt, gefolgt von 'x', beziehungsweise 'y' werden dann vom Darstellungsprogramm zwei Anfrageparameter erzeugt. Gesendet wird in diesem Falle, wenn die Koordinaten (99,111) angeklickert werden: 'MandelbrotXHTML.php?k.x=99&k.y=111'

Hinsichtlich der Textalternative gelten die Anmerkungen entsprechend dem vorherigen Beispiel. Das Skript, welches per action als Ziel des Formulars angegeben ist, sollte also eine sinnvolle Textalternative liefern, falls die Klickkoordinaten 0,0 gesendet werden.

Zurück zu Gratulation! | Hoch zu XHTML | Vor zu Allgemeine Bereiche