Mapeando uma Imagem

Definição

Um mapa de imagem é uma imagem com áreas clicáveis. Para isso existe o atributo usemap que especifica um mapa de uma imagem (do lado do cliente.) Esse atributo está associado com um <map> nome do elemento ou atributo ID, e cria uma relação entre o <img> e o <map>.
Nota: O atributo usemap não pode ser usado se o elemento <img> for descendente de um <a> ou <button> elemento.

Tipos de mapeamento

circle = circular
rect = retangular
poly = poligonal

Procedimentos para mapear uma imagem:

Criar para cada parte da imagem um link. Pode ser para uma página html no próprio computador, ou um link para uma página na internet (esta o link vai para o google).
Abrir no paint a imagem a ser mapeada. No canto inferior esquerdo da janela do editor, aparece uma barra com o tamanho da área mapeada.
colocar o mouse no canto superior esquerdo da imagem e anotar os números que aparecem perto da cruz.
Fazer o mesmo para o canto inferior direito.

Mapeando uma imagem e mostrando parte dela, em tamanho maior

clique aqui para ver o resultado

Primeiro siga os passos 2, 3 e 4, explicados acima.
No Html:
<img src="/static/ img/sistema-solar.jpg" (aqui é o caminho da imagem já salva na pasta de imagens).
width="501" height="308"
usemap="#planetmap">