Atributo coords do HTML <area>

Etiqueta HTML <area>

Definição e uso

Propriedade coords Propriedade que determina as coordenadas da área no mapeamento de imagem.

Propriedade coords Propriedade com Propriedade shape Juntos, são usados para especificar o tamanho, forma e posição da área.

Dica:As coordenadas do canto superior esquerdo da área são 0,0.

Atenção:Se as coordenadas de um marcador area coincidirem com outras áreas, a área que apareceu primeiro será priorizada. O navegador ignorará as coordenadas fora dos limites da imagem.

Exemplo

Usar a propriedade coords para definir as coordenadas de cada área no mapeamento de imagem:

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

Experimente você mesmo

Sintaxe

<area coords="value">

Valor da propriedade

Valor Descrição
x1,y1,x2,y2 Determinar as coordenadas do canto superior esquerdo e inferior direito do retângulo (shape="rect").
x,y,raio Determinar as coordenadas do centro e o raio (shape="circle").
x1,y1,x2,y2,...,xn,yn

Determinar as coordenadas das arestas do polígono.

Se o primeiro e o último par de coordenadas não forem iguais, o navegador adicionará o último par de coordenadas para fechar o polígono (shape="poly").

Explicação detalhada:

A propriedade coords do marcador <area> define as coordenadas da área sensível ao mouse no mapeamento de imagem do cliente. O número e o significado das coordenadas dependem da forma da área decidida pela propriedade shape. Pode-se definir uma área de hiperlink no mapeamento de imagem do cliente como retângulo, círculo ou polígono, entre outros.

A seguir estão os valores apropriados para cada forma:

Círculo: shape="circle", coords="x,y,z"

Aqui, x e y definem a posição do centro do círculo ("0,0" é a coordenada superior esquerda da imagem), r é o raio circular em pixels.

Polígono: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

Cada par de coordenadas "x,y" define um vértice de um polígono ("0,0" é a coordenada superior esquerda da imagem). Para definir um triângulo, são necessários pelo menos três conjuntos de coordenadas; para polígono de alta latitudes, são necessários mais vértices.

Os polígonos são fechados automaticamente, portanto, não é necessário repetir a primeira coordenada no final da lista para fechar toda a área.

Retângulo: shape="rectangle", coords="x1,y1,x2,y2"

O primeiro conjunto de coordenadas é o canto de um retângulo, e o outro conjunto de coordenadas é o canto oposto, "0,0" é a coordenada do canto superior esquerdo da imagem. Note que definir um retângulo é uma maneira simplificada de definir um polígono com quatro vértices.

Por exemplo, o fragmento de XHTML abaixo define um quadrante inferior direito de 100x100 pixels em uma imagem e uma área circular no meio da imagem.

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

Suporte de navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

Etiqueta HTML <area>