[zurück zum Handbuch] [Voriges Beispiel]

Bilder mit verschiedenen "anklickbaren" Bereichen

(Eine Beschreibung finden Sie auch auf einer Seite der Uni-Karlsruhe)

Auf Hypertextseiten findet man manchmal Bilder, die zu verschiedenen Seiten verzweigen, je nachdem, welcher Bereich des Bildes mit der Maus angeklickt wird.
Am nebenstehenden Bild können Sie das ausprobieren.
Das läßt sich relativ leicht auch in eigene Seiten einbauen. Man muß zu solch einem Bild nur eine "Map-Datei" erstellen, die die Informationen über die verschiedenen Bereiche des Bildes enthält.
Folgende Schritte sind nötig:

  1. Erstellen Sie das gewünschte Bild oder nehmen Sie irgendein vorhandenes Bild im GIF-Format (z.B. Beispiel.gif). Speichern Sie dieses Bild in Ihrem Verzeichnis .public_html (oder einem Verzeichnis darunter) auf "lehrer1".

  2. Binden Sie das Bild als Link in Ihr Hypertextdokument ein. Dabei müssen Sie den Parameter ISMAP verwenden und als Ziel statt eines HTML-Dokuments das Programm "htimage" im Verzeichnis "cgi-bin" auf "lehrer1" angeben, gefolgt von der URL Ihrer Map-Datei.

    Beispiel:
    <A HREF= "http://www.lehrer.uni-karlsruhe.de/cgi-bin/htimage/~za204/Beispiel.map">
    <IMG Border=0 SRC="http://www.lehrer.uni-karlsruhe.de/~za204/Beispiel.gif"> ISMAP</A>

    Die Dateien Beispiel.gif und und die noch zu erstellende Datei Beispiel.map müssen hierfür beide im Verzeichnis .public_html liegen. Falls Sie Verzeichnisse unterhalb von .public_html verwenden, müssen Sie die entsprechenden Pfadangaben zwischen ~za204/ und /Beispiel. ... einfügen.

  3. Erstellen Sie die zum Bild gehörige Datei "Beispiel.map". Sie ist eine reine Textdatei, die Angaben darüber enthält, welche Bereiche des Bildes wohin verweisen sollen.

    Es gibt drei Arten, Bereiche festzulegen (Maßeinheit ist "Anzahl Bildschirmpunkte" (Pixel) ):

    circle (x,y) r URL
    Kreis mit Mittelpunkt M(x,y) und Radius r
    rectangle (x1,y1) (x2,y2) URL
    Rechteck mit linker oberer Ecke (x1,y1) und rechter unterer Ecke (x2,y2)
    polygon (x1,y1) (x2,y2) ... (xn,yn) URL
    Polygon mit den Eckpunkte (xi,yi)
    Der Eintrag default URL gibt an, wohin verzweigt werden soll, wenn keiner der definierten Bereiche im Bild angeklickt wird.

    Die zugehörige Map-Datei zum obigen Beispiel-Bild könnte enthalten:
    (Jeder Eintrag in einer Zeile! Kein Zeilenumbruch vor "http"!)

    rectangle (20,180) (210,278) http://www.lehrer.uni-karlsruhe.de/~za204/Rechteck.html
    circle (164,66) 44 http://www.lehrer.uni-karlsruhe.de/~za204/Kreis.html
    polygon (15,97) (48,176) (138,71) (93,32) http://www.lehrer.uni-karlsruhe.de/~za204/Polygon.html
    default http://www.lehrer.uni-karlsruhe.de/~za204/Daneben.html

    Die Koordinatenangaben in der Map-Datei können Sie zunächst mit "Dummy"-Werten belegen. Die richtigen Koordinatenzahlen finden Sie dann, indem Sie die Maus über das Bild bewegen, nachdem Sie Ihr Dokument mit Netscape geladen haben. Netscape zeigt nämlich bei Verwendung des ISMAP-Parameters in der Statuszeile unten die Koordinaten des Punktes an, auf den die Maus gerade zeigt.

[zurück zum Handbuch] [Voriges Beispiel] .................... Beispiele zu HTML

Thomas Mühlbayer Letzte Änderung: 20.4.1996