6.3 Image Map
Mit einer Image Map ist es möglich, einzelne Ausschnitte eines Bildes als Links zu nutzen. So können beispielsweise bestimmte Orte in einem Stadtplan als Links auf Informationen zu den entsprechenden Gebäuden genutzt werden. |
Bei einer Image Map handelt es sich um eine Technik, Teilflächen eines Bildes mit einem Link auf ein anderes Objekt (z.B. ein HTML-Dokument) zu versehen. Nur die jeweils so ausgezeichneten Stellen eines Bildes sind dann für den Verweis sensitiv. Ein Klick darauf öffnet das aufzurufende Dokument.
Aus der Anfangszeit des Web gibt es einige Varianten der Image Maps, die durch die Webserver unterstützt wurden und heute kaum noch verwendet werden. In dieser Qualifikationseinheit benutzen wir ausschließlich in HTML-Dokumente integrierte, browserseitige Image Maps.
Innerhalb des Elements body und vor dem entsprechenden Bildelement sollte die Image Map in der HTML-Datei stehen. Die Koordinaten der verweissensitiven Pixel müssen bekannt sein oder ermittelt werden. Wir verwenden dazu in unserem Beispiel ein Bild mit 400x325 Pixeln. Eine sensitive Fläche ist ein Kreis mit dem Mittelpunkt bei den Koordinaten 311,137 (x,y) und einem Radius von 20 Pixeln. Diese Fläche soll nicht auf ein anderes Dokument verweisen, sondern nur einen alternativen Text anzeigen, wenn mit der Maus darauf gezeigt wird. Die zweite sensitive Fläche ist ein Rechteck mit einer Größe von 22x23 Pixeln, dessen linke obere Ecke bei den Koordinaten 238,259 liegt; sie soll auf das Dokument haus.html verweisen.
Die Koordinaten werden jeweils in Pixeln ausgehend von der linken oberen Ecke des Bildes gerechnet. Bei einem Kreis sind Mittelpunkt und Radius anzugeben, für ein Rechteck müssen die Koordinaten der linken oberen und rechten unteren Ecke angegeben werden:
Der entsprechende HTML-Code sieht wie folgt aus:
| <html> <map name="lageplan"> <img src="lageplan.gif" width="400" height="325" border="0" usemap="#lageplan"> </body> |
Die Beschreibung der verweissensitiven Flächen erfolgt innerhalb des Elements map mit Elementen vom Typ area. Attribute legen Form (shape), Lage und Größe (coords) fest. Mit dem Attribut usemap im Element img des Bildes wird dem Bild diese Beschreibung zugeteilt.
Mögliche Werte für das Attribut shape sind circle, rect und polygon mit jeweils diesen Wertangaben im Attribut coords:
|
circle coords="x,y,r" |
Dabei sind x, y und r die x- und y-Koordinaten des Kreismittelpunktes sowie der Radius des Kreises. x1,y1, x2,y2 usw. bezeichnen die Koordinaten der Eckpunkte des Rechtecks bzw. Polygons. Der Punkt x1,y1 eines Polygons muss nicht identisch mit xn,yn sein, da polygon die Fläche automatisch schließt.
Folgende Attribute im Element area können außerdem verwendet werden:
| nohref | Bei Klick in die sensitive Fläche soll keinem Link gefolgt werden. |
| target | Mit target="_blank" wird das Verweisdokument in einem neuem Browserfenster geöffnet. Man kann auch andere Ziele angeben (siehe Lerneinheit 8 - Frames und Navigation- ). |
| alt | Alternativen Text sollten Sie immer einsetzen, denn auch beim Überfahren mit der Maus wird dieser Text angezeigt und hilft bei der Navigation. |