HTML coords-Attribut

Das HTML-Attribut coords legt die Koordinaten eines anklickbaren Bereichs (eines „Hotspots") in einer clientseitigen Image-Map fest. Es wird am Element <area> innerhalb eines <map>-Elements verwendet.

Der coords-Wert ist für sich allein bedeutungslos — er wird stets anhand des shape-Attributs desselben <area>-Elements interpretiert. Dieselben Zahlen bedeuten für ein Rechteck, einen Kreis oder ein Polygon unterschiedliche Dinge, daher müssen coords und shape immer zusammen gesetzt werden.

So funktioniert das Koordinatensystem

Koordinaten werden in CSS-Pixeln gemessen, relativ zum gerenderten Bild:

Der Ursprung 0,0 liegt in der oberen linken Ecke des Bildes.
x nimmt nach rechts zu, y nimmt nach unten zu.
Die untere rechte Ecke des Bildes liegt bei width,height — bei einem 250×150-Bild ist die größte gültige Koordinate also ungefähr 250,150.

Da die Koordinaten an die gerenderte Größe gebunden sind, ist eine Image-Map nur bei der Größe präzise, für die die Koordinaten ermittelt wurden. Wenn Sie das Bild per CSS skalieren (mit einem anderen width/height-Wert, einem responsiven Layout oder durch Zoom), passen die Hotspots nicht mehr mit dem Bild überein. Image-Maps funktionieren daher am besten bei Bildern mit fester Größe.

Werte

Das Format von coords hängt vollständig von shape ab:

`shape`-Wert	`coords`-Format	Bedeutung
`rect`	`x1,y1,x2,y2`	Obere linke Ecke `(x1, y1)` und untere rechte Ecke `(x2, y2)`. Es muss gelten: `x1 < x2` und `y1 < y2`.
`circle`	`x,y,radius`	Mittelpunkt `(x, y)` und der `radius` in Pixeln.
`poly`	`x1,y1,x2,y2,...,xn,yn`	Eine Liste von Eckpunkten. Der Browser schließt die Form automatisch, indem er den letzten Punkt mit dem ersten verbindet.
`default`	(keine)	Das gesamte Bild. `default` ist ein Wert von `shape`, nicht von `coords` — ein `<area shape="default">` benötigt kein `coords`.

Ein häufiger Fehler ist, bei rect die Ecken in der falschen Reihenfolge anzugeben. coords="90,90,35,55" ist ungültig, da x1 > x2 und y1 > y2; korrekt lautet das Rechteck coords="35,55,90,90".

Syntax

<area shape="rect" coords="x1,y1,x2,y2">

Beispiele für das HTML coords-Attribut

Das folgende Beispiel verwendet ein rect, zwei circles und ein poly-Bereich auf demselben Bild:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <!-- circle: center x,y and radius -->
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="195,32,28" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <!-- rect: top-left x1,y1 then bottom-right x2,y2 (x1<x2, y1<y2) -->
      <area shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
      <!-- poly: a triangle joining three points -->
      <area shape="poly" coords="150,80,230,80,190,140" alt="js" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Probier es selbst »

Hinweis: Geben Sie jedem <area> immer einen aussagekräftigen alt-Wert — er ist der einzige Text, den ein Screenreader für diesen Hotspot hat.

Ein Hinweis zur Barrierefreiheit

Clientseitige Image-Maps sind eine veraltete Technik und gehen mit realen Einschränkungen einher. Hotspots sind per Tastatur nicht immer zuverlässig erreichbar, ihre Bedeutung hängt von einem präzisen alt für jedes <area> ab, und die Koordinaten stimmen nicht mehr, sobald das Bild skaliert oder in einer anderen Größe gerendert wird. Für die meisten modernen Oberflächen ist es besser, individuell gestaltete, fokussierbare Links oder Schaltflächen über (oder neben) dem Bild anzuordnen, die barrierefrei und responsiv bleiben. Greifen Sie auf coords und Image-Maps nur zurück, wenn Sie wirklich unregelmäßig geformte, anklickbare Bereiche auf einem einzelnen Rasterbild mit fester Größe benötigen.

Übung

Was ist die Funktion des 'coords'-Attributs in HTML und wie wird es verwendet?

Das 'coords'-Attribut in HTML wird verwendet, um die Koordinaten des Hotspot-Bereichs in einer clientseitigen Image-Map festzulegen.Das 'coords'-Attribut in HTML bestimmt die Farbe eines Elements.Es wird mit dem 'area'-Tag verwendet und der Wert des 'coords'-Attributs hängt vom 'shape'-Attribut ab.Das 'coords'-Attribut funktioniert unabhängig und hängt nicht vom 'shape'-Attribut ab.Das Format des 'coords'-Werts hängt von 'shape' ab: 'rect' verwendet x1,y1,x2,y2, 'circle' verwendet x,y,radius und 'poly' eine Liste von Punkten.'circle', 'rect', 'poly' und 'default' sind alle gültige Werte des 'coords'-Attributs.