ImageMaps (Abbildungspläne)

In Imagemaps (Abbildungsplänen) kann der Anwender mit der Maus auf einen Bildbereich klicken, worauf ein entsprechender Verweis ausgeführt wird.
Damit dient eine Grafik einerseits der optischen Auflockerung einer Seite und gleichzeitig lassen sich auf ihr eine Vielzahl von Links konzentrieren.
Auf diese Weise kann der Anwender unter Umständen wesentlich intuitiver und schneller zu gezielten Informationen gelangen als durch lange verbale Verweislisten.

Um ein Bild als Abbildungsplan zu kennzeichnen, muss man nur innerhalb der <img>-Markierung
das Attribut USEMAP = "#Planname" hinzufügen.

Beispiel:

<img SRC="Glauchau.gif" USEMAP="#Stadtplan">

Mit <map NAME = "Planname"> leitet man die Definition des "hot zone" eines Bildes ein, also des Bereiches, der nach dem Anklicken zu einem Verweis führt.
Der Planname muss dabei mit dem Plannamen der Grafik übereinstimmen.

Zwischen dem einleitenden <map ...> und dem abschließenden </map> definiert man nun mit <area> den Bereich mit dem jeweiligen Sprungziel.

Diese aktiven Gebiete des Bildes kann man wie folgt festlegen:

Form	Formattribut	Festlegung der Koordinaten	Beschreibung der Koordinaten
rechteckig	SHAPE = "RECT"	COORDS = "x1,y1,x2,y2"	P1(x1;y1), P2(x2;y2) diagonale Eckpunkte
rund	SHAPE = "CIRCLE"	COORDS = "xM,yM,r"	M(xM;yM) Mittelpunkt, r Radius
n-Eck	SHAPE = "POLYGON"	COORDS = "x1,y1,x2,y2 ..."	P1, P2 ... Eckpunkte des n-Ecks

Mit der Angabe HREF = "Referenzdatei" innerhalb von <area> definiert man das Sprungziel.

Beispiel:

<map NAME="Stadtplan">
<area SHAPE="CIRCLE" ALT="Berufsschule" COORDS="120,65,10" HREF="Schule.html">
<area SHAPE="RECT" ALT="Burg" COORDS="220,35,240,50" HREF="Burg.html">
</map>

Das Attribut TITLE = "Text" im <area>-Tag ermöglicht die Anzeige eines alternativen Textes, der beim Überstreichen mit der Maus angezeigt wird und der besseren Orientierung dient.

Mit dem Freeware-Tool Mapedit lassen sich ImageMaps kinderleicht herstellen. (Download von Map32.exe)

• Voraussetzung ist die HTML-Datei mit eingebundener Grafik, die als ImageMap dienen soll.
• Nach Starten von Map32 wird die HTML-Datei nach Mapedit gelesen und die gewünschte Grafik ausgewählt.
• Nun können in der angezeigten Grafik die gewünschten "heißen Zonen" markiert werden (Rechteck, Kreis oder Polygon möglich).
• Mit Rechtsklick gelangt man in ein Dialogfenster, wo insbesondere Pfad und Name der Referenzdatei notiert werden.
• Nun noch alles speichern und fertig ist unsere HTML-Datei mit ImageMap.

Viel Spaß!