Studieren in Chemnitz. Wissen, was gut ist.






  • Anmelden

Verwendung von Imagemaps

Imagemaps sind Bilder, bei denen man durch Anklicken von bestimmten Bereichen innerhalb des Bildes Aktionen ausführen kann, wie zum Beispiel das Bild an dieser Stelle vergrößern oder nähere Information zu dem angewählten Bereich ausgeben.

Dafür gibt es zwei Techniken:

  1. Serverbasiert (ISMAP): Die "Klick-Koordinaten" werden einem CGI-Programm auf dem WWW-Server übermittelt, der dann das nächste Dokument auswählt.
    Vorteil: Funktioniert mit allen grafikfähigen Browsern
    Nachteil: Serverbelastung, nur über HTTP, nicht offline.
  2. Klientbasiert (USEMAP): Anhand der "Klick-Koordinaten" entscheidet der Browser, welches Dokument angefordert wird. Dazu sind im HTML-Dokument besondere Anweisungen.
    Vorteil: schnell und offline möglich, da ohne Server
    Nachteil: ältere Browser könnens nicht (Netscape 1, ältere Mosaic)
Da überwiegend neuere Browser verwendet werden, empfehlen wir die klientbasierten Imagemaps (Client-Side Imagemaps). Ohne großen Aufwand kann man zusätzlich auch die serverbasierten Imagemaps aktivieren.

Ein einfaches Beispiel

Schritte zur Erstellung

  1. Bild erzeugen/beschaffen
    Mit einem beliebigen Programm wird ein Bild im GIF-oder JPEG-Format und im HTML-Verzeichnis abgelegt.

    Beispiel: image.gif

  2. Bildkoordinaten ermitteln und angeben
    Nun müssen die Bildbereiche mit dazugehörigen Aktionen festgelegt werden (welcher URL beim Klicken in welche Bildregion?). Wie bekommt man nun die Koordinaten im Bild heraus? Mit xv läßt sich das sehr gut machen, mit der mittleren Maustaste im GIF-Bild klicken, die Koordinaten erscheinen im Bild.

    Für klientseitige Imagemaps werden die Koordinaten (links oben, rechts unten, jeweils x,y Koordinaten) durch MAP- und AREA-Tags festgelegt:

    <MAP NAME="mapname">
    <AREA [SHAPE="    shape"] COORDS="x,y,..." [HREF="reference"|NOHREF]>
    </MAP>

    mapname bezeichnet den Namen der Map-Daten, so daß in einem IMG-Element darauf Bezug genommen werden kann. Für jede anwählbare Region steht ein AREA-Element. Deren Form wird mit shape angegeben. Gegenwärtig ist dafür nur "RECT", ein Rechteck, definiert. Ohne angegebenes SHAPE-Tag wird SHAPE="RECT" verwendet. Das COORDS-Attribut gibt die Koordinaten der Region in Bild-Pixeln an. Für ein Rechteck sind das "links,oben,rechts,unten". Die rechteckige Region schließt die untere rechte Ecke mit ein, d.h. für die gesamte Region eines 100x100 Pixel großen Bildes wären die Koordinaten "0,0,99,99".

    Beispiel:
    <MAP NAME="map">
<AREA SHAPE="rect" COORDS="15,13,100,85"  HREF="rot.html">
<AREA SHAPE="rect" COORDS="101,13,185,85" HREF="gruen.html">
</MAP>

    Für serverseitige Imagemaps muß ein "Map-File" erstellt werden. Folgende Anweisungen sind möglich:

    default URL
    URL wird benutzt, wenn keine der weiter beschriebenen Flächen getroffen wurden. Sollte immer gesetzt sein!
    circle (x,y) r URL
    Kreis mit Mittelpunkt (x,y) und Radius r.
    rectangle (x1,y1) (x2,y2) URL
    Rechteck mit (beliebigen) zwei gegenüberliegenden Ecken der Koordinaten (x1,y1) und (x2,y2).
    polygon (x1,y1) (x2,y2) ... (xn,yn) URL
    Polygon mit n Eckpunkten (xi,yi). Ist das beschriebene Polygon nicht geschlossen (erstes und letztes Koordinatenpaar sind nicht identisch), wird es vom Programm ergänzt.
    Beispiel: File image.map enthält:
    default                       /urz/www/imagemap.html
rectangle (15,13)(100,85)     /urz/www/rot.html
rectangle (101,13) (185,85)   /urz/www/gruen.html
  3. Bild als Imagemap im HTML-Dokument kennzeichnen
    Nur klientbasiert - USEMAP:
    <IMG WIDTH="200" HEIGHT="100" SRC="image.gif" 
 ALT="Imagemap-Demo - nur fuer grafische Browser..." 
 ISMAP USEMAP="#map">
    ... zusätzlich auch serverbasiert:
    <A HREF="/cgi-bin/htimage/urz/www/image.map">
<IMG WIDTH="200" HEIGHT="100" SRC="image.gif" 
 ALT="Imagemap-Demo - nur fuer grafische Browser..." 
 ISMAP USEMAP="#map"></A>

Siehe auch: SELFHTML