HTML <area> coords Eigenschaft

HTML-<area> Tag

Definition und Verwendung

coords-Attribut Attribut regelt die Koordinaten der Bereiche in der Bildkarte.

coords-Attribut Attribut und shape-Attribut Zusammen verwendet, um die Größe, Form und Position des Bereichs zu bestimmen.

Tipp:Die Koordinaten des linken oberen Ecks des Bereichs betragen 0,0.

Beachten Sie:Falls die Koordinaten eines area-Tags mit anderen Bereichen überschneiden, wird der erst auftretende area-Tag priorisiert. Der Browser ignoriert Koordinaten außerhalb der Grenzen des Bildes.

Beispiel

Verwenden Sie das coords-Attribut, um die Koordinaten jeder Region in der Bildkarte zu bestimmen:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus">
</map>

Versuchen Sie es selbst

Syntax

<area coords="value">

Attributwert

Wert Beschreibung
x1,y1,x2,y2 Bestimmen Sie die Koordinaten des linken oberen Ecks und des rechten unteren Ecks des Rechtecks (shape="rect").
x,y,Radius Bestimmen Sie die Koordinaten des Zentrums und den Radius (shape="circle").
x1,y1,x2,y2,...,xn,yn

Bestimmen Sie die Koordinaten der Kanten des Polygons.

Falls das erste und letzte Koordinatenpaar unterschiedlich sind, fügt der Browser das letzte Koordinatenpaar hinzu, um das Polygon (shape="poly") zu schließen.

Detaillierte Erklärung:

Die coords-Attribut des <area>-Tags definiert die Koordinaten der auf den Mauszeiger reagenden Bereiche im Clientenbildkarten. Die Zahlen und deren Bedeutung hängen von der von der shape-Attribut festgelegten Form des Bereichs ab. Es können Hyperlinksbereiche in der Clientenbildkarten als Rechteck, Kreis oder Polygon und so weiter definiert werden.

Nachstehend sind die angemessenen Werte für jede Form aufgeführt:

Kreis: shape="circle", coords="x,y,z"

Hier definieren x und y die Position des Zentrums des Kreises ("0,0" ist der linke obere Ecke des Bildes), r ist der Radius des Kreises in Pixeln.

Polygone: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

Jedes Paar von "x,y"-Koordinaten definiert einen Eckpunkt eines Polygons ("0,0" ist der linke obere Ecke des Bildes). Um einen Dreieck zu definieren, sind mindestens drei Koordinatenpaare erforderlich; für hochoffene Polygone ist eine größere Anzahl von Eckpunkten erforderlich.

Polygon werden automatisch geschlossen, daher ist es nicht erforderlich, die erste Koordinate am Ende der Liste zu wiederholen, um den gesamten Bereich zu schließen.

Rechteck: shape="rectangle", coords="x1,y1,x2,y2"

Die erste Koordinate ist die Ecke eines Rechtecks, die anderen Koordinaten sind die Ecken des Diagonals, "0,0" ist die obere linke Ecke des Bildes. Beachten Sie, dass die Definition eines Rechtecks eine vereinfachte Methode zur Definition eines Polygons mit vier Ecken ist.

Zum Beispiel definiert der folgende XHTML-Abschnitt im rechten unteren Viertel eines 100x100-Pixel-Bildes einen auf den Mauszeiger reagierenden Bereich und einen kreisförmigen Bereich in der Mitte des Bildes.

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

HTML-<area> Tag