Como descobrir e inserir coordenadas para imagens mapeadas | Criando Imagens Mapeadas em HTML 5

Já tentou criar uma imagem mapeada em HTLM 5 e simplesmente perdeu a noção ao tentar descobrir e inserir as coordenadas de uma imagem? Pois neste post eu vou ensinar passo a passo a matemática e a lógica disso tudo, e solucionar seu problema de uma vez por todas !

1º Passo - Entendendo o Plano Cartesiano e como ele se aplica em mapas de imagem HTML 5

Entender como o Plano Cartesiano se aplica em mapas de imagem é fundamental para solucionar todo o problema.

- Imagine o Plano Cartesiano.

Temos o ponto 0, que pode partir em duas direções, x ou y. Em HTML 5 temos que declarar 4 coodenadas para criar um mapa de imagem retangular. Precisamos declarar W, H, X e Y.

W - representa a largura.
H - representa a altura.
X - é o ponto que determina a largura.
Y - é o ponto que determina a altura.

Sendo assim, o que você precisa fazer é declarar de que ponto "y vai até h" e de que ponto "x vai até w".
o.O
Calma que vou explicar melhor abaixo:

Supondo que vamos criar um mapa de 20 px de altura x 40 px de largura :

Neste caso, a largura (W) foi do ponto 0 em (X) até 40px.
ou seja;
W andou até 40 em x.

e

a altura (H) foi do ponto 0 em (Y) até 20px.
ou seja;
H andou até 20 em y.

Assim, os pontos se encontram e formam o retângulo!

2º Passo - Declarando W, H, X e Y no código HTML 5.

Essa é a parte mais simples!

Aqui está um típico código de mapa de imagem!
Em "img src" inserimos o endereço da imagem que será mapeada.
Em "use map" nós linkamos o mapa, inserindo o nome do mapa com uma hastag na frente.
Em "map name", nós damos nome ao mapa, o mesmo nome utilizado na tag anterior. {sem a hastag}
Em "area shape", nós declaramos qual o formato do mapa.

Em "coods", nós iremos inserir os valores das coordenadas do mapa, na ordem já mencionada acima:

W, H, X e Y.

No caso do nosso exemplo de um retângulo de 20px por 40 px, se ele anda do ponto 0 em x até 40 px de w e do ponto 0 em y até 20 px de h; podemos concluir que a declaração será feita assim:

coords="40, 20, 0, 0"

E assim, nossa imagem mapeada está prontaaaa !!!

  ..........................

bjssss