HTML: Image-Map

Image-Maps sind Bilder/Grafiken über die ein bestimmtes Koordinatenmappe (Map) gelegt wurde. Anhand dieser Koordinaten können nun auf dem Bild/der Grafik Bereiche (Areas) markiert bzw. bestimmt werden.

Image-Map definieren

Als erstes muss ein Bild notiert werden, dann legt das map-Element den Grundstein für eine Image-Map. Innerhalb des map-Elements werden dann wiederum die Bereiche mit dem area- oder a-Element definiert. Beide funktionieren gleich und bewirken auch das Gleiche, es wird aber geraten area zu verwenden. Beispiel:

<img usemap="#map1" src="bild.gif" >
<map name="map1">
 <area href="name.htm" alt="Text" coords="3,15,7" shape="circle">
 <area href="name2.htm" alt="Text" coords="15,46,69,50,13,14" 
       shape="poly">
</map> 

Bei der Notoation von Image-Maps ist zu beachten, dass das map-Element einen Namen (name-Attribut) erhält und das Bild, über das die Mappe gelegt werden soll ein usemap-Attribut, welches auf die Mappe verweist, enthält. Beispiel (grün hervorgehoben):

<img usemap="#map1" src="bild.gif" >
<map name="map1">
 ... 
</map> 

Area/Bereich definieren

Grundsätzlich gibt es 3 Arten von Areas/Bereichen einer Image-Map: Rechtecke, Kreise, Polygone. Diese werden im shape-Attribut mit den Werten rect (für Rechtecke), circle (für Kreise) oder poly bzw. polygon (für Polygone) definiert. Beispiel:

<area coords="45,50,34,45" shape="rect">
<area coords="3,15,7" shape="circle">
<area coords="15,46,69,50,13,14" shape="poly"> 

Die Größe und Lage werden dabei mit dem coords-Attribut (coords = engl. Koordinaten) definiert. Die einzelnen Arten der Bereiche werden dabei wie folgt mit Koordinaten beschrieben:

Viereck

Ein Viereck erhält 4 Koordinatenwerte x1,y1,x2,y2.
x1 - Abstand der linken Ecke oben in Pixel von links
y1 - Abstand der linken Ecke oben in Pixel von oben
x2 - Abstand der rechten Ecke unteren in Pixel von links
y2 - Abstand der rechten Ecke unteren in Pixel von oben

Darstellung: Koordinaten bei rect

Kreis

Ein Kreis erhält 3 Koordinatenwerte x1,y1,rad.
x1 - Abstand des Kreis-Mittelpunkts in Pixel von links
y1 - Abstand des Kreis-Mittelpunkts in Pixel von oben
rad - Radius des Kreises in Pixel

Darstellung: Koordinaten bei circle

Polygon

Ein Polygon erhält jeweils 2 Koordinatenwerte für einen Punkt x[n],y[n].
x[n] - Abstand eines Punktes in Pixel von links
y[n] - Abstand eines Punktes in Pixel von oben

Darstellung: Koordinaten bei poly

Restbereich

Der restliche Bereich in einer Image-Map, der Bereich also, für den keine Areas/Bereiche definiert worden sind kann ebenfalls beschrieben werden. Dieser 'leere' Bereich wird ebenso wie Vierecke, Kreise und Polygone behandelt. Restbereiche werden, mit dem Wert default im shape-Attribut anstatt der sonstigen Angaben, definiert. Sie erhalten keine Koordinaten. Beispiel:

<area shape="default"> 

Verweise

Jedem Bereich/Area kann ein Verweis zugeweisen werden. Notieren Sie diese mit dem href-Attribut im einleitenden area-Tag. Als Werte können wie bei Links URL's oder andere Pfadangeben. Beispiel:

<area href="" coords="45,50,34,45"
      shape="rect">
<area href="name.htm" coords="3,15,7" shape="circle">
<area href="pfad/name.html#anker" coords="15,46,69,50,13,14" 
      shape="poly">
<area href="name.htm#anker" shape="default"> 

Bereiche ohne Verweise

Ebenso wie Sie jedem Bereich einen Verweis zuteilen können, können diese Bereiche auch keinen Verweis erhalten. Diese werden mit dem nohref-Attribut notiert. Beispiel:

<area nohref shape="default"> 

Beachten Sie dabei, dass das nohref-Attribut keinen Wert erhält.

Bereichtext

Jedem Bereich kann ein Text zugewiesen werden. Dieser wird, ebenso wie bei normalen Bildern, angezeigt, sobald der Mauszeiger über dem jeweiligen Bereich ist. Man notiert diesen mit dem alt-Attribut. Beispiel:

<area alt="Link zu a coding project" href="" 
      coords="45,50,34,45" shape="rect">
<area alt="Bereich ohne Verweis" nohref> 

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ IFrames

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project