Imagem | Parte 2 | Tutorial de HTML5 | #13 | #uninerds | Universo dos Nerds
3Código fonte da vídeo aula:
http://www.uninerds.net/?locale=pt_BR#!html-css-e-javascript/tutorial-de-html5
Links:
https://youtu.be/yDXsMhfjU7c
Redes Sociais
Facebook: https://www.facebook.com/uninerds
Twitter: https://www.twitter.com/uninerds
YouTube: https://www.youtube.com/user/uninerds?sub_confirmation=1
LinkedIn: https://www.linkedin.com/company/uninerds
Instagram: https://www.instagram.com/uninerds
Gostou do vídeo? Veja 10 opções de como você pode apoiar o Universo dos Nerds:
https://youtu.be/KYAljlRtlb4
Faça parte de um grupo focado em Tecnologia: https://www.facebook.com/groups/DevAt
Hashtags: #uninerds #html #html5
Afiliado: http://www.cursos24horas.com.br/parceiro.asp?cod=promocao131331
Contato: uninerds@uninerds.net
Para colocar imagem em HTML é utilizado a tag img que tem os seguintes atributos:
- usemap para informar qual é o mapeamento da imagem
É possível fazer o mapeamento de uma imagem para colocar links dentro dela, para isso é utilizado a tag map que tem o atributo name e para informar que a o mapeamento pertence a determinada imagem nela é definido o mesmo valor do name do map no atributo usemap da imagem començando com #
Entre a abertura e fechamento da tag map tem a tag area para definir a área que irá ter o link e ela tem os seguintes atributos:
- alt texto que serve para definir a área
- coords para definir as coordenadas do link em pixel, os valores informados aqui depende do valor informado no atributo shape
- shape para informar o formato que a área do link irá ter, tem os seguintes valores:
- circle para definir um círculo e no atributo coords será informado as posições X, Y do centro do círculo e o tamanho do raio
- rect para definir um retângulo e no atributo coords será informado as posições X e Y da borda superior esquerda e as posições X e Y da borda inferior direita
- poly para definir um polígono e no atributo coords será informado as posições X e Y de cada ponto
- Todos os atributos que a tag a possui