Atributo coords do 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>
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 |