Clickable Images

Client-Side Image Maps

Die Erweiterungen für sogenannte Client-Side Image Maps hatten bis vor kurzem noch den Status eines Internet Draft, jetzt RFC 1980. In HTML 3.2 sind die zugehörigen Elemente aufgenommen - siehe unter MAP und AREA. Unterschiede - und Vorteile - gegenüber den anfangs gebräuchlichen Server-Side Image Maps sind u.a.:

Die Interaktion mit dem Server für die Zuordnung einer hot area des Bildes zu einem URL entfällt: Die Map-Information liegt bereits beim Client.
Ein graphischer Browser kann deshalb beim Bewegen des (Maus-)Zeigers über das Bild die Zuordnung anzeigen.
Erweiterungen ermöglichen Verarbeitung mit Linemode-Browsern.
Links können relativ angegeben werden.
Codierung der hot areas ist standardisiert und nicht abhängig vom Server-/CGI-Map-Programm; Dokumente werden dadurch portabler.

Hier mein Beispiel eines Client-Side Image Map:

Und der HTML-Source-Code:

<IMG SRC="Zimmer.jpg" WIDTH=470 HEIGHT=302 USEMAP="#Beispiel"><BR> <MAP NAME="Beispiel"> <AREA SHAPE="rect" COORDS="29,18,191,72" ALT="Schrank " HREF="1.html"> <AREA SHAPE="rect" COORDS="203,16,296,33" ALT="Regal " HREF="2.html"> <AREA SHAPE="rect" COORDS="310,15,408,71" ALT="Schreibtisch" HREF="3.html"> <AREA SHAPE="rect" COORDS="27,183,64,203" ALT="Nachttisch " HREF="4.html"> <AREA SHAPE="rect" COORDS="37,216,81,280" ALT="Kissen " HREF="5.html"> <AREA SHAPE="rect" COORDS="92,211,218,284" ALT="Bettdecke " HREF="6.html"> <AREA SHAPE="rect" COORDS="28,206,227,287" ALT="Bett " HREF="7.html"> <AREA SHAPE="circle" COORDS="349,225,45" ALT="Tisch " HREF="8.html"> <AREA SHAPE="polygon" COORDS="322,155,358,142,372,182,335,194" ALT="Stuhl " HREF="9.html"> <AREA SHAPE="polygon" COORDS="279,227,319,220,328,259,288,266" ALT="Stuhl " HREF="9.html"> <AREA SHAPE="polygon" COORDS="420,153,443,185,412,209,389,177" ALT="Stuhl " HREF="9.html"> <AREA SHAPE="rect" COORDS="24,12,447,289" ALT="Teppich " HREF="0.html"> </MAP>

Zugehörige Attribute von IMG, MAP und AREA:

USEMAP

Vor dem Nummernzeichen # steht ein - vollständiger oder partieller - URL, sofern der Map-Abschnitt in einem anderen Dokument steht, hinter dem # der Name aus dem MAP-Element.

NAME

Name der Image Map (ohne #) für Referenz über USEMAP.

SHAPE

Definierte Werte sind RECT, CIRCLE und POLYGON; RECT ist der Default-Wert.

COORDS

Angabe der Koordinaten als (dezimale) Pixelwerte in folgender Form:

"x1,y1,x2,y2" für die linke obere und rechte untere Ecke bei SHAPE="rect".
"x,y,r" für Mittelpunkt und Radius bei SHAPE="circle".
"x1,y1, ... xn,yn" für die Ecken des Polygonzugs bei SHAPE="polygon". (Wenn die Endpunkte nicht gleich sind, wird die fehlende Kante implizit ergänzt.)

HREF

Angabe des Links wie beim A-Element - jetzt auch wieder relativ zu dem Dokument, in dem die Map-Definition steht (nicht notwendig gleich dem Dokument, das das IMG-Element enthält).

NOHREF

Alternative zu HREF mit der Bedeutung, daß keine Aktion bei Klick in den Bereich ausgelöst werden soll.

ALT

Alternativer Text für die Darstellung durch Linemode-Browser.

Die AREA-Elemente werden in der angegebenen Reihenfolge bis zum ersten Treffer abgearbeitet. Die spezifizierten Bereiche können sich deshalb überlappen (siehe im Beispiel oben: das vierte und fünfte Rechteck liegen im sechsten). Das fehlende Äquivalent zu default in den Server-Side Image Maps kann deshalb durch ein letztes AREA-Element mit den Rechteck-Koordinaten des gesamten Bildes ersetzt werden.

Abwärtskompatibilität: Das USEMAP-Attribut kann mit dem ISMAP-Attribut in einem IMG-Element gemeinsam verwendet werden:

Ein Browser, der USEMAP nicht kennt, macht die traditionelle Verarbeitung über das CGI-Programm des Servers.
Die Regel für Browser, die USEMAP und MAP unterstützen, ist: Wenn USEMAP angegeben ist, wird ein ISMAP-Attribiut und ein umschließendes A-Element ignoriert.

Wie erzeuge ich die Koordinatenfolgen?

Zu Fuß - z.B. in einem Grafikprogramm die Punkte mit der Maus anfahren und die Koordinaten aufschreiben.
Mit spezieller Software, die den Source-Code für das IMG- und MAP-Element vollständig erzeugt nach Abgreifen der Hot Areas mit der Maus.
Beispiel dafür: MapEdit für Windows, Unix/X.

Alternative Gestaltung mit JavaScript

Alternative Attribute in den AREA-Elementen:

onMouseOver: JavaScript-Code, der ausgeführt werden soll, wenn der Mauszeiger in die Hot Area bewegt wird. Hier z.B.:
window.status='Schrank '; return true; Der Text in Anführungszeichen wird in der Statuszeile des Browsers ausgegeben.
onClick: JavaScript-Code, der ausgeführt werden soll, wenn die linke Maustaste in der Hot Area gedrückt wird. Hier z.B.:
alert('Schrank '); return true; Es soll eine Alert Box des Browsers mit dem angegebenen Text erscheinen. Achtung: Diese Aktion ersetzt eigentlich die durch ein HREF-Attribut angegebene, funktioniert aber nur bei Browsern, die JavaScript können (und dürfen).

Bernd Cappel, 7.6.1995; letzte Änderung: 5.3.1999
Erstellt für eine Lehrveranstaltung des URZ der HHU im Sommersemester 1995