Elemento HTML: área

Sintaxe

1

 name="map">

2

   shape="rect"coords="0, 0, 50, 50" href="page.html">

3

Exemplo

1

 src="image.jpg" usemap="#mymap">

2

3

 name="mymap">

4

   shape="rect" coords="0, 0, 50, 50" href="page1.html">

5

   shape="rect" coords="50, 0, 100, 50" href="page2.html">

6

   shape="rect" coords="0, 50, 50, 100" href="page3.html">

7

   shape="rect" coords="50, 50, 100, 100" href="page4.html">

8

Neste exemplo, temos uma imagem com um mapa chamado mymap. O mapa tem quatro áreas definidas com o

Resultado

Veja como podemos colocar uma imagem com quatro áreas para usar:

Atributos

O

• shape: pode ser definido para circle, default, polyou rectdependendo da forma da área clicável.
• coords: define as coordenadas da área clicável (mais detalhes abaixo).
• href: especifica o URL ao qual a área clicável deve vincular.

Outros atributos incluem alt, target, download, ping, rele referrerpolicy.

Como é que coords Atributo Trabalho?

O coords atributo é onde definimos as coordenadas do shape atributo.

Por exemplo, se a forma for rect (um retângulo) como em nossa demonstração acima, você definiria o canto superior esquerdo e canto inferior direito coordenadas do retângulo. Um retângulo com as coordenadas 0,0,50,50 teria seu canto superior esquerdo colocado em 0,0 e seu canto inferior direito em 50,50:

Então são retângulos, mas para outras formas o coords Os atributos aceitam valores diferentes:

• circle: o valor aceito é x,y,radius onde x,y são as coordenadas do centro do círculo, seguidas pelo raio.
• poly: o valor aceito é x1,y1,x2,y2,..,xn,yn onde os pares ditam os pontos ao longo das arestas do polígono. Espera-se que o primeiro e o último par de coordenadas sejam os mesmos, mas se não for o caso, o navegador adicionará um último valor para fechar a forma.

Contente

O