Aanbevolen cursus:

HTML <area> Tag

HTML <area> shape-attribuut

shape Definitie en gebruik

shape Het attribuut bepaalt de vorm van het gebied. coords-attribuut Gebruik samen om de grootte, vorm en positie van het gebied te bepalen.

Voorbeeld

Gebruik het shape-attribuut om de vorm van elke regio in een afbeeldingskaart te specificeren:

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

Probeer het zelf

Syntax

<area shape="default|rect|circle|poly">

Attribuutwaarde

Waarde Beschrijving
default Definieer het hele gebied.
rect Definieer een rechthoekgebied.
circle Definieer een cirkelgebied.
poly Definieer een veelhoekgebied.

Uitleg in detail:

shape Het attribuut wordt gebruikt om de vorm van het gebied te definiëren dat gevoelig is voor de muis in een afbeeldingskaart:

  • cirkel (circ of circle)
  • veelhoek (poly of polygon)
  • rechthoek (rect of rectangle)

shape De waarde van het attribuut beïnvloedt hoe de browser de coords-attribuut interpreteert. Als er geen shape attribute, then it will assume that the value default is used. According to the standard, default means that the area covers the entire image. In practice, browsers use the default rectangular area and expect to find 4 coords values. If no shape is specified and no 4 coordinates are included in the tag, the browser will ignore the entire area.

can be recognized shape Browsers that can provide a default value for an attribute can provide an area that includes all hotspots for clicking outside the range defined by other hotspot definitions. Since the area in the <map> tag is used in the order of "first come, first served", all default areas must be placed at the end. Otherwise, the default area will cover all other areas that appear in other image maps.

Browsers do not have strict requirements for the implementation of shape names. For example, for rectangles, Netscape 4 cannot recognize "rectangle", but it can recognize "rect". For this reason, we recommend using abbreviated names.

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <area> Tag