Elemento HTML: área

0
Tutoriais
24/05/2023
A+ A-
Email Print

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 

 elemento, cada um com uma forma diferente, coordenadas e URL.


Resultado


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




Atributos


O 

 tag suporta Atributos Globais em HTML.  Os Atributos Globais são comuns a todos os elementos HTML e podem ser usados ​​em todos eles (embora possam não ter muito efeito em alguns).


    

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


um gráfico ilustrando o sistema de coordenadas de formas em HTMLum gráfico ilustrando o sistema de coordenadas de formas em HTMLum gráfico ilustrando o sistema de coordenadas de formas em HTML


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 

 elemento é freqüentemente usado em conjunto com o  elemento, mas também pode ser usado com outros elementos, como  e .  O elemento pode ser usado quando se espera conteúdo de frase, mas somente se houver um map ancestral do elemento.


Você sabia?


    

  • O 
    
     foi introduzido pela primeira vez no HTML 3.2, que foi lançado em 1997!
    • 

  • Nenhuma tag final é necessária ao criar um 
    
     marcação.
    • 



Saber mais


    

  • Especificação oficial do W3C 
    
    

    • 








												

						
																		
								
		

			

				
			

			

				
Posted by 

				

				
										
				

										
										
										
										
										
										
										
										
										
					
				

				
								
			

			

		

		
								
						
Tagged with


					

											


											
								

								
Newer Post

								
								
Older Post

								

			

		
		

			
Deixe uma resposta