Imagemaps

Stellen Sie sich vor, Sie möchten gerne Informationen über Ihre alte Schulklasse auf Ihrer Homepage anbieten. Sie haben ein altes Klassenfoto eingescannt. Zu jedem Schulkameraden und jeder Schulkameradin möchten Sie gerne ein Profil anlegen. Also entschließen Sie sich für die klassische Variante und listen alle Namen unterhalb des Fotos in Reihenfolge der aufgeführten Kameraden/innen auf und verlinken diese auf eine jeweilige Seite mit genaueren Angaben. Doch warum sollten wir uns auf Möglichkeiten beschränken, die sich zwar auf Klassenfotos bewährt hat aber bestimmt nicht die Möglichkeiten von HTML ausreizt? Statt eine Namensliste anzulegen wollen wir jede Person auf dem Bild direkt verlinken. So reicht ein Mausklick auf den Körper der Person aus, um zu dem gewünschten Profil zu gelangen.
Hierfür verwenden wir eine so genannte Imagemap. Imagemaps werden mit dem <map>-Tag definiert und sind Client-seitig. Damit eine Grafik mit einer Imagemap ausgestattet werden kann, benötigen wir ein spezielles Attribut innerhalb der Grafikdefinition:


Die Anweisung usemap=“#Map1“ legt den Namen der verwendeten Imagemap fest. Dieser Name muss entsprechend in einer Imagemap vorkommen:


Innerhalb des <map>-Tags benötigen wir nun das <area>-Tag um bestimmte Bereiche unserer Bilddatei als „hot“ (anklickbar) zu definieren. Das <area>-Tag besitzt eine Reihe von Attributen, die teilweise in herkömmlichen Hyperlink-Definitionen vorkommen:


So sollten Sie bereits die „href”-Anweisung zum Festlegen einer URL kennen. Des Weiteren sollten Ihnen bereits die Attribute „target“ und „alt“ bekannt sein. Konzentrieren wir uns daher auf die beiden Attribute „shape“ und „coords“. Beide stehen in einem engen Zusammenhang. Mit „shape“ definieren wir die Form des anklickbaren Bereiches. Diese Form muss wiederum mit dem passenden Koordinatensatz in „coords“ ausgestattet sein. Im obigen Code-Schnipsel verwenden wir mit „rect“ ein Rechteck. Alternativ können Sie hier auch „rectangle“ schreiben. Die Form erwartet vier Pixelkoordinaten x1, y1, x2, y2, wobei x1 und y1 die Koordinaten für die linke obere Ecke und x2, y2 die Koordinaten für die untere rechte Ecke des Rechtecks sind. Wenn Sie einen Kreis als Form verwenden wollen, müssen Sie der „shape“-Anweisung folgendes übergeben:


Auch hier können Sie alternative eine Abkürzung „circ” verwenden. Mit einem Kreis benötigen wir nur drei Koordinaten x, y und r. Die ersten beiden Koordinaten x und y bestimmen den Mittelpunkt des Kreises, während r den Radius angibt.
Übergeben Sie dem Attribut „shape“ das Schlüsselwort „poly“ oder „polygon“ um selbst die Form des anklickbaren Bereiches zu bestimmen:


Hierbei haben wir keine fest vorgegebene Anzahl von Koordinaten. Wir lesen die in „coords“ angegebenen Werte jeweils als x/y-Koordinaten in der Form x1, y1, x2, y2, x3, y3, ... . Jede x/y-Koordinate bestimmt einen Punkt auf einem Pfad, der schließlich einen Bereich umschließt. Wenn Sie lediglich einen maussensitiven Bereich in einer Imagemap anlegen wollen, der bei einem Mausklick keine Aktion auslöst, sondern beispielsweise nur einen mit „alt“ definieren Alternativtext anzeigt, so geben Sie statt „href“ das Attribut „nohref“ in ihrem <area>-Tag an.
Übrigens können Sie auch in Imagemaps Event-Hander wie „onClick“ verwenden. So können Sie unter anderem an Stelle einer Verlinkung ein Popup-Fenster innerhalb einer Imagemap nutzen.

Beispieldatei herunterladen [download=Imagemaps.zip]