Atributo coords do HTML

O atributo HTML coords define as coordenadas de uma área clicável (um "hotspot") em um mapa de imagem do lado do cliente. É usado no elemento <area>, dentro de um <map>.

O valor de coords não tem significado por si só — ele é sempre interpretado de acordo com o atributo shape no mesmo <area>. Os mesmos números significam coisas diferentes para um retângulo, um círculo ou um polígono, portanto coords e shape devem ser sempre definidos juntos.

Como funciona o sistema de coordenadas

As coordenadas são medidas em pixels CSS, em relação à imagem renderizada:

A origem 0,0 é o canto superior esquerdo da imagem.
x aumenta para a direita, y aumenta para baixo.
O canto inferior direito da imagem está em width,height — portanto, para uma imagem de 250×150, a coordenada válida máxima é aproximadamente 250,150.

Como as coordenadas estão vinculadas ao tamanho renderizado, um mapa de imagem só é preciso no tamanho para o qual as coordenadas foram medidas. Se você dimensionar a imagem com CSS (um width/height diferente, um layout responsivo ou zoom), os hotspots deixarão de se alinhar com a imagem. Por isso, os mapas de imagem funcionam melhor em imagens de tamanho fixo.

Valores

O formato de coords depende inteiramente do shape:

Valor de `shape`	Formato de `coords`	Significado
`rect`	`x1,y1,x2,y2`	Canto superior esquerdo `(x1, y1)` e canto inferior direito `(x2, y2)`. É necessário que `x1 < x2` e `y1 < y2`.
`circle`	`x,y,radius`	Centro `(x, y)` e o `radius` em pixels.
`poly`	`x1,y1,x2,y2,...,xn,yn`	Uma lista de pontos de vértice. O navegador fecha automaticamente a forma unindo o último ponto ao primeiro.
`default`	(nenhum)	A imagem inteira. `default` é um valor de `shape`, não de `coords` — um `<area shape="default">` não recebe `coords`.

Um erro comum é fornecer os cantos de rect na ordem errada. coords="90,90,35,55" é inválido porque x1 > x2 e y1 > y2; escrito corretamente, esse retângulo é coords="35,55,90,90".

Sintaxe

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

Exemplos do atributo coords do HTML

O exemplo abaixo usa um rect, dois circles e um poly na mesma imagem:

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

Experimente Você Mesmo »

Nota: Sempre forneça a cada <area> um valor alt significativo — é o único texto que um leitor de tela tem para aquele hotspot.

Uma nota sobre acessibilidade

Os mapas de imagem do lado do cliente são uma técnica legada e apresentam ressalvas reais. Os hotspots nem sempre são acessíveis pelo teclado de forma confiável, seu significado depende de um alt preciso para cada <area>, e as coordenadas se quebram sempre que a imagem é redimensionada ou renderizada em uma escala diferente. Para a maioria das interfaces modernas, é melhor posicionar links ou botões individualmente estilizados e focalizáveis sobre (ou ao lado de) a imagem, que permanecem acessíveis e responsivos. Use coords e mapas de imagem apenas quando realmente precisar de regiões clicáveis irregulares em uma única imagem raster de tamanho fixo.

Atributos e tags relacionados

<map> — define o mapa de imagem que agrupa os elementos <area>.
<area> — o elemento no qual coords é definido.
Atributo alt — o texto acessível para cada área.

Prática

Qual é a função do atributo 'coords' no HTML e como ele é utilizado?

O atributo 'coords' no HTML é usado para definir as coordenadas da região de hotspot em um mapa de imagem do lado do cliente.O atributo 'coords' no HTML determina a cor de um elemento.É usado com a tag 'area' e o valor do atributo 'coords' depende do atributo 'shape'.O atributo 'coords' funciona de forma independente e não depende do atributo 'shape'.O formato do valor 'coords' depende do 'shape': 'rect' usa x1,y1,x2,y2, 'circle' usa x,y,radius e 'poly' usa uma lista de pontos.'circle', 'rect', 'poly' e 'default' são todos valores válidos do atributo 'coords'.