HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » HTML » Image-Map

HTML: Image-Map

von Jan Winkler

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.

Anzeige

Image-Map definieren  nach oben

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  nach oben

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

Koordinaten bei rect
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

Koordinaten bei circle
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

Koordinaten bei poly
Darstellung: Koordinaten bei poly

Restbereich  nach oben

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  nach oben

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="http://www.html-world.de" 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  nach oben

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  nach oben

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 HTMLWorld" href="http://www.html-world.de" 
      coords="45,50,34,45" shape="rect">
<area alt="Bereich ohne Verweis" nohref> 

Programme  nach oben

Da es doch wohl mitunter etwas kompliziert werden dürfte größere Image-Maps allein durch Tippen zu erstellen haben wir eine kleine Auswahl einiger Image-Map Programme erstellt.



« zurück weiter »
Bewerten

 

HTML

.Autor:Jan Winkler.
. Bewertung:
HTML: Image-Map HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 1393 Beiträge im HTML Forum .

Navigation


 
     
 

Anzeige