Image-Maps 01 - verweissensitive Grafiken

Alternativ zum Textlink oder auch zum üblichen Grafiklink (das gesamte Bild kann angklickt werden) bietet sich die Möglichkeit bestimmte Bereiche (hot spots) innerhalb einer Grafik als Verweisfläche zu deklarieren. Dann spricht man von einer 'Image-Map'.

link verweis image-map grafik rect circle poly hot-spot

Bestimmte Bereiche einer Grafik als Verweisfläche (Link) definieren

Bei der Festlegung der verweissensitiven Bereiche unterscheidet man 3 Typen:

Vieleck (Polygon) [poly], mindestens 3 Koordinatenpunkte
Viereck (Rectangle) [rect], 2 Koordinatenpunkte
Kreis (Circle) [circle], 1 Koordinatenpunkt + Radius

1 Beispiel

Beim linken Foto habe ich einige Spots als verweissensitive Bereiche festgelegt. Die sind erkennbar an der Änderung des Mauszeigers (Pfeil / Pointer), wenn er über die Grafik bewegt wird. Hier werden mit Hilfe der Links einer Image-Map in Kombination mit dem EventHandler 'onMouseOver' im rechten Kasten Texte ausgetauscht.

Bewegen Sie den Mauszeiger über die 'Körner-Grafik'.

Rennmausfutter
Anzeigebereich

2 Beispiel

Drei Teilbereiche der linken Grafik habe ich als verweissensitive 'Hot-Spots' definiert. Das erkennt man an der Änderung des Mauszeigers (Pfeil / Pointer), wenn man den Mauszeiger über die Grafik bewegt. Hier werden durch Links der Image-Map in Kombination mit dem EventHandler 'onMouseOver' im rechten Kasten Grafiken ausgetauscht.

3 Beispiel

Navigation als Image-Map in der Rubrik Infrastruktur. Es handelt sich hier nicht um 8 einzelne Grafiken und (darunter) 8 Textlinks sondern um eine einzige Grafik. Rand anzeigen Für diese Grafik habe ich 8 "HotSpots" festgelegt, die angeklickt zur jeweiligen Seite weiterleiten (Anzeige in einem neuen Tab / Browserfenster). Hier werden beim Anklicken HTML-Seiten geöffnet

Vorteil: Nicht 8 sondern nur eine einzige Grafik muss vom Server geladen werden.

Übrigens finden Sie solche Piktogramme und weitere 7992 (insgesamt ca. 8000) Mini-Images zur kostenlosen Verwendung in meiner

Mini-Image-Box

Image-Map

Die allgemeine Bezeichnung für eine solche Grafik mit einem oder mehreren verweissensitiven 'Hot-Spots' ist: Image-Map. Dazu wird die Grafik zunächst mit dem üblichen <img>-Tag in die Seite eingebunden. Dann werden zusätzliche Angaben notwendig (Erläuterungen unten). Bestimmte Bereiche dieser Grafik können als verweissensitive Flächen festgelegt werden. Dazu können Sie drei verschiedene geometrische Formen wählen:

Rechteck
Kreis und
Vieleck

Beim Rechteck und Vieleck werden die Formen durch Koordinaten für Eckpunkte festgelegt. Beim Kreis durch Koordinaten für den Mittelpunkt und dem Maß für den Radius. Wie das funktioniert lesen Sie weiter unten.

verwendete Begriffe

Erst einmal zu den grundsätzlichen Erklärungen (violette Begriffe merken):

Die gesamte Grafik (umrandet) ist die 'map'.
Innerhalb dieser "map" werden mittels Koordinatenangaben die verweissensitiven Bereiche festgelgt.

Dabei unterscheidet man folgende Formen (shapes):

1) Rechteck (rectangle), attributname 'rect'
2) Kreise (circle), attributname 'circle'
3) Vielecke (polygone), attributname 'poly'

Notwendige Anweisungen für eine Imagemap

Der HTML-Code für eine Image-Map besteht aus Anweisungen für die Map und einer Anweisung für eine Grafik. Zuerst werden die Anweisungen für die Map notiert (keine dieser Anweisungen ist für den Betrachter der Seite sichtbar). Nach den Anweisungen für die Map wird der HTML-Code für die sichtbare Grafik eingetragen.

a) Eine Map definieren

Das einleitende HTML-Tag der Map erhält das Attribut 'name'. Dort wird ein von Ihnen gewählter Name eintragen. Innerhalb der HTML-Tags für die Map werden später Anweisungen für die 'Hot-Spots' eingetragen.

<map name="Beispiel">

</map>

b) Verweisbereiche mit 'area shape' eintragen

Jetzt fehlen nur noch die Anweisungen, die bestimmte Bereiche dieser Grafik als verweissensitive Flächen ('Hot-Spots') festlegen. Also wird innerhalb der HTML-Tags für die Map für jeden verweissensitiven 'Hot-Spot' eine Anweisungszeile notiert. Dabei legt man die Formen der 'Hot-Spots' und deren Koordinaten fest.

<map name="Beispiel">
<area shape="rect" ...
<area shape="circle" ...
<area shape="poly" ...
</map>

Oben sind offenbar 3 Anweisungszeilen vorgesehen! Die Anweisungen in der Map beziehen sich auf die Grafik, die in Ihrem HTML-Code gleich danach notiert wird.

c) <img>-Tag notieren

Jetzt wird also der HTML-Code für eine Grafik notiert: Zunächst wird die Grafik mit dem üblichen <img>-Tag in die Seite eingebunden. Dann muss unbedingt das zusätzliche Attribut 'usemap' notiert werden. Als Wert wird ein Name eingetragen, dem Sie ein Gatterzeichen (#) voranstellen. Sie verwenden dabei die (identische) Bezeichnung, die Sie bereits bei der Definition der Map gewählt hatten.

<img usemap="#Beispiel" alt="Nav" src="grafik-150.gif" width="150" height="150" ... >

Die Attribute 'usemap' und 'alt' sind zwingend notwendige Eintragungen!

Verweisflächen (areas) festgelegen

Wie Sie schon vermutet haben, sind wichtige Punkte in meiner Beispielgrafik nicht ohne Grund vorhanden.

Die Punkte werden wie in einem Koordinatensystem mit Abstand von links (x) und von oben (y) in Pixel gemessen und beziehen sich auf die linke obere Ecke der Grafik.

Der erste Punkt links oben im violetten Rechteck hat demnach die Koordinaten x=12 y=12 .

Er ist also von der oberen linke Ecke gemessen um 12 Pixel nach rechts und um 12 Pixel nach unten versetzt.

Die X-Y-Koordinaten werden relativ zur linken oberen Ecke der Grafik ausgemessen!

Hier können Sie eine Demo ansehen

Einträge für Rechteck, Kreis und Vieleck (rect, circle, poly)

Abhängig von der Form der verweissensitiven Bereiche, müssen die Angaben eingetragen werden.

Für ein Rechteck genügen zwei Einträge für die gegenüberliegenden Ecken, jeweils zwei Angaben für den X- und Y-Abstand (4 Werte).
Für einen Kreis tragen Sie die Koordinaten für den Mittlelpunkt ein und notieren eine weitere Angabe für den Radius (insgesamt also 3 Werte).
Für ein Vieleck ist die Notierung anders: Für jeden Punkt tragen Sie X- und Y-Werte paarweise ein.

Schauen Sie einmal auf meine Beispielgrafik

für shape="rect"	linke obere Ecke, rechte untere Ecke
für shape="circle"	Mittelpunkt, Radius
für shape="poly"	jeder Punkt des Polygons, in Reihenfolge

für shape="rect"	coords="x1,y1, x2,y2"
für shape="circle"	coords="x1,y1, Radius"
für shape="poly"	coords="x1,y1, x2,y2, x3,y3, x4,y4, ... "

(alle Angaben in Pixel, durch Komma getrennt)

Der vollständige Code für mein Beispiel:

<map name="Beispiel">
<area shape="rect" coords="12,12,85,53" href="#" alt="Rechteck">
<area shape="circle" coords="110,86,33" href="#" alt="Kreis">
<area shape="poly" coords="7,78,50,76,74,139,13,140" href="#" alt="Polygon">
</map>

<img usemap="#Beispiel" src="grafik.gif" width="150" height="150" border="1"
alt="mein-image">

An Stelle der '#' wird der Dateiname (oder ein Aktionsaufruf) eingetragen.

So könnte Ihre Anwendung aussehen (aktives Beispiel)

(hier habe ich 2 MouseEvent-Anweisungen und ein Alert-Script hinzugefügt)

Beispiele für Aktionen

Sie können nun mit bestimmten Aktionen entsprechende Ereignisse auslösen. Wenn Sie eine URL eintragen, wird beim Mausklick eine Datei oder Webseite aufgerufen. Sie können auch den Aufruf einer JavaScript-Funktion eintragen, die mehrere Anweisungen beinhaltet.

<area shape="rect" coords="12,12,85,53" href="#" alt="Rechteck">

An Stelle von href="#"

Referenz	Wert	Ergebnis
href="dateiname.htm"	dateiname.htm	HTML-Seite öffnen
href="ordner/dateiname.htm"	ordner/dateiname.htm	HTML-Seite öffnen
href="http://www.clickstart.de"	http://www.clickstart.de	Webseite aufrufen
href="javascript:alert('HALLO')"	javascript:alert('HALLO')	Meldung anzeigen
href="javascript:Funktionsname()"	javascript:Funktionsname()	Funktion aufrufen

Zusätzlich möglich: EventHandler

onMouseover="GrafikAnzeigen()" onMouseout="GrafikAusblenden()"

Aufbauend auf dieses Beispiel, bei dem in der Regel eine Datei geöffnet werden soll, zeige ich beim Beispiel Image-Map 02 wie beim Anklicken eine Funktion zum Öffnen eines PopUp-Windows aufgerufen wird.