HTML Afbeeldingen

HTML <area> coords attribuut

  • Met het coords attribuut definieerd men de x en y coördinaten van een gebied in een client-side imagemap.
  • Het coords attribuut wordt samen met het shape attribuut gebruikt, om de vorm, de afmeting en de plaats van het gebied aan te duiden.
  • Bij een rechthoek en een veelhoek worden de coördinaten van de verschillende hoekpunten vastgelegd.
    Bij een cirkel het middelpunt en de straal.
  • De coördinaten van het hoekpunt linksboven van de imagemap zijn x0, y0.

Attribuut voorbeeld

<html>
<body>
<img src="voorbeeld.gif" usemap="#voorbeeldmap" />
<map name="voorbeeldmap">
<area shape="circle" coords="a,b,r" />
<area shape="rect" coords="A,B,C,D" />
<area shape="poly" coords="a,b,c,d,e,• • • ," />
</map>
</body>
</html>

Verschil HTML - XHTML

In HTML heeft het <area> element geen eindtag.

In XHTML moet de tag correct worden gesloten,
dus <area attributen /> !

naar boven 

tip

X Is de afstand in pixels gemeten vanaf de linkerkant van de afbeelding en Y de afstand in pixels vanaf de bovenkant.
Daarbij wordt gerekend met de afmetingen van de afbeelding zoals deze zijn opgegeven via het width en/of height attribuut van het <img> element (de coördinaten wijzigen dus bij vergroten of verkleinen van de afbeelding).

nota

Indien gebieden elkaar overlappen, dan geldt de url van het eerst gedefinieerde gebied.

Attribuut waarde

Waarde Beschrijving
x1, y1, x2, y2 Bij een rechthoek (shape="rect") geeft men de coördinaten van de hoeken linksboven en rechtsonder.
x, y, radius Bij een cirkel (shape="circle") geeft men de coördinaten van het middelpunt en de straal.
x1, y1, x2, y2, ..., xn, yn Bij een veelhoek (shape="poly") specificeert men alle hoeken van de veelhoek.
Wanneer het eerste paar coördinaten niet gelijk is aan de laatste zal de browser zelf het laatste paar invoegen om de veelhoek te sluiten.

naar boven 

Opbouw

<area coords="waarde"> In HTML
<area coords="waarde" /> In XHTML

Browser ondersteuning

Internet Explorer Firefox Chrome Opera Safari

  • Het <area> coords attribuut wordt ondersteunt in de bekende browsers.
naar boven naar boven naar target attribuut
naar boven naar het target attribuut