Clickable Images

Traditionell: Server-Side Image Maps

Elemente für ein Clickable Image in der HTML-Source

So sehen die Zeilen in der HTML-Source für obiges Bild aus:

<A HREF="/cgi-bin/htimage/~cappel/WebKurs/ClickableImage.map">
<IMG SRC="ClickableImage.gif" ISMAP> </A>

Außen steht das Anker-Element mit einem URL, der auf ein Image-Map-Programm verweist zusammen mit dem Pfad einer zu dem Bild passenden Map-Datei (Aufbau wie allgemein bei URLs, die auf ein CGI-Skript zeigen).
In der CERN-Server-Auslieferung heißt das Programm htimage.
In der NCSA-Server-Auslieferung heißt das Programm imagemap.
Beim Apache-Server ist das Image-Map-Programm ggf. im Server integriert; in dem URL steht dann nur der Pfad auf die Map-Datei.
Innen steht das Image-Element mit einem ISMAP-Attribut.

Erstellung der Map-Datei

Die Map-Datei ist eine einfache Textdatei mit Zuordnungen von Bereichen des Bildes - Rechtecken, Kreisen, Inhalt von Polygonzügen, Rest - auf URLs; Maßeinheit sind Pixel. Die referierten URLs sind entweder vollständig mit Protokoll, Hostnamen und Pfad oder partiell, aber mit einem absoluten Pfad (mit / beginnend). Relative Pfade würden vom Browser mit dem Pfad auf das Image-Map-Programm ergänzt, was Unsinn ergibt.

Syntax für die Map-Dateien (Image configuration files):

CERN-htimage - Beispiel zu obigem Bild;
NCSA-imagemap - Beispiel zu obigem Bild.
Apache-Imagemap-File (wie NCSA-Syntax plus Erweiterungen)

Es gibt mittlerweile auch graphische Software, die erlaubt, die geometrischen Objekte für die einzelnen sensitiven Bereiche in einem Bild mit Mausbewegungen zu kennzeichnen, und die Textdatei mit den so gewonnenen Werten erzeugt. Gefunden habe ich:

Mapedit für Windows und X; Bildschirmbild dieses Programmes (auf dem Sun-Server des URZ; dort installiert unter /usr/local/bin); die neue Version 2.24 für Windows und Windows 95/NT und diverse Unix- Systeme unterstützt Client-Side Clickable Images;
WebMap für Macintosh von City.Net. Obiges Bild in der Bearbeitung dieses Programms sehen Sie hier.
ImageMapper für Macintosh (10$ Shareware); Bildschirmbild;
ImageMapper unterstützt ebenfalls Client-Side Clickable Images und erlaubt die Definition weiterer Formate; Speicherung auf dem Mac erfolgt in eigenen Dateien, aus der auch nachträglich Map-Dateien verschiedenen Formats generiert werden können (Image/Generate ImageMap.../Compile).

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 oben beschriebenen 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 das Beispielbild als Client-Side Image Map:

Und der HTML-Source-Code:

<IMG SRC="ClickableImage.gif" USEMAP="#Beispiel"><BR> <MAP NAME="Beispiel"> <AREA SHAPE="rect" COORDS="96,180,652,229" HREF="ExampleGIF.html"> <AREA SHAPE="rect" COORDS="101,279,567,306" HREF="HTML.html#IMG"> <AREA SHAPE="rect" COORDS="95,233,653,390" HREF="ClickableImage.html#Source"> <AREA SHAPE="rect" COORDS="476,413,539,440" HREF="CERNmap.txt"> <AREA SHAPE="rect" COORDS="135,440,194,465" HREF="NCSAmap.txt"> <AREA SHAPE="rect" COORDS="96,392,653,482" HREF="ClickableImage.html#MapDatei"> </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.

Ein wenig zum Erzeugen von Bilddateien

Mittlerweile kann man im Web oft den Eindruck gewinnen, daß das Ausschmücken von Dokumenten mit Bildern wichtiger sei als der Inhalt. Trotzdem können Dokumente durch Einsatz von Bildern lesbarer werden, und können Bilder manche Information besser herüberbringen als lange Beschreibungen.

Interne Bilder (Inline Images) sollten im GIF, externe in GIF- oder JPEG-Format auf den Server gebracht werden; JPEG ist besonders gut geeignet für Fotos.
Hier einige Quellen von Icons: SCS, ECE, Rutgers, Italy, Cardiff, and elsewhere on Planet Earth (entnommen aus einem WWW-Vortrag von der Carnegie Mellon University).
Eigene Bilder können eingescannt, als TIFF-Dateien abgespeichert und in GIF oder JPEG gewandelt werden (z.B. mit xv unter Unix/X).
Eine professionellere Methode ist der Weg über eine Kodak-PhotoCD und eine passende Software auf einem Rechner mit CD-ROM-Laufwerk (z.B. Adobe Photoshop).
Einige Informationen zum Stichwort: transparent/interlaced GIFs.

Zum Schluß meine Methoden zum Erzeugen von Bildschirmbildern bzw. Fensterbildern:

Windows: Betätigen der Taste DRUCK (PRINT) erzeugt unter Windows ein Bildschirmbild in der Zwischenablage (Clipboard). Im Programm WINJPEG läßt sich dieses Bild oder ein passender Ausschnitt mit der Paste-Funktion in ein neues Bild kopieren und z.B. als GIF-Datei abspeichern.
Unix/X: Das Programm xv hat in seinen Controls einen Grab-Button. Nach Drücken dieses Knopfes mit der linken Maustaste erscheint ein Cursor, der in das Fenster gezogen werden kann, von dem ein Bild genommen werden soll. Dieses erscheint - nach Drücken der linken Maustaste - in einem neuen xv-Fenster und kann im GIF-Format abgespeichert werden.
Macintosh: Die Tastenkombination Shift-Command-3 erzeugt ein Bildschirmfoto in einer PICT-Datei mit Namen Bild 1 (oder 2...). Um das ganze Bild oder Ausschnitte als GIF-Datei abzuspeichern, kann man das Shareware-Programm Grafikkonverter oder andere Software verwenden.

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