Mapeamento de imagens com Image Maps (sem erro)
O tutorial de hoje é sobre como mapear as imagens no Image Maps, mas sem erro. Muitas blogueiras lá do grupo CDB perceberam que os códigos de mapeamento do Image Maps estava dando erro, então eu decidi dar uma olhada e ver o problema. Então se você quer mapear suas categorias, menu ou uma imagem qualquer, segue o tutorial abaixo 
1. Acesse o site do Image Maps
Após entrar no site do Image Maps, clique no botão laranja Browse for File e escolha a imagem de sua preferência, clique em Start Mapping e em click to continue.
2. Comece a mapear
Para mapear aperte o botão direito do mouse e clique em Create Rect e faça um retângulo com o botão esquerdo pressionado. Na caixa de opções que aparecer você já pode clicar em Save. Repita o processo até terminar sua imagem e depois aperte o botão direito do mouse.
3. Faça o upload da imagem
Você pode fazer o upload da imagem que usou no tutorial nesse site aqui ou até mesmo no próprio blogger, mas selecione a opção tamanho original. Guarde a URL da imagem gerada.
4. Gerando o código
Agora voltando à página do Image Maps, clique em Get Code, depois em HTML code e selecione o código que está na opção HTML Image Map Code:
5. Novo código (sem erros)
A partir desse código faremos um novo código. Abaixo o novo código com os espaços para substituir certinho, pois usaremos apenas as coordenadas do Image Maps:
Para vocês testarem!
Prontinho, abaixo vou deixar o meu código pronto e o resultado da imagem para vocês verem como ficou e testarem:
20 Comentários
Gisela Santana
óia! Gostei… não sabia que era assim que funcionava. hahaha
vou guardar esse tutorial pra quando tiver tempo de fazer botoes para o meu blog. rs
Beijos!
Livre Leve Livro
Carla Vieira
Que legal Gisela, faça siim, eu adoro mapeamento!
Beijos
Blog Ruivando
Aprendi faz pouco tempo e odiava quando me perdia na hora de mapear 🙁 hahahaha o tutorial tá ótimo, parabéns!
Sucesso!
Beijos
http://blogruivando.blogspot.com.br/
Clay
Obrigada pela dica, veio em boa hora =D
Carla Vieira
Obrigada! Agora você não se perde mais haha
Beijos
Carla Vieira
Que bom que veio em boa hora Clay!!! 😀
Beijos
Mia
era isso que eu precisava na minha vida hahahaa
Obrigada amore <3
Carla Vieira
haha de nada miia <3
Giselma Lima Frazao
Ahhh esse image map salvou meu blog da mesmice, meu primeiro cabeçalho fiz nele e ficou showw. Quando descobri ele, pensei: "HAHA agora vou dominar o mundo HAHA" — Aloka, eu sei kkkk, mas a sensação foi tipo isso.
O trem super fácil de usar, seu tutorial ficou muito bom!
O mundo precisa saber dele haha
Beijos =*
4-fases.blogspot.com.br
Carla Vieira
Eu também adoro, fica muito legal HAHA
Obrigada, sério isso ajuda muito, acho que todo mundo precisa saber!
Beijos
Isabella
Oi Carla, ótimo tutorial, ajudou muuuuito! Você é um amorzinho, sério ♥♥ hahaha
Mas só uma dúvida: tem como os links abrirem em outra aba do navegador, tipo um "a href"? 😀
Obrigada, beijocas.
Isabella
Ai, lerdeza minha, já consegui! hahaha :3
Carla Vieira
Tem sim ♥, você adiciona dentro de <a o target="_blank", mas você ja conseguiu 😀 😀
De nada, beijos e obrigada por visitar o meu cantinho haha
Isabella Duarte
Oii Carla, ó eu aqui de novo xD haha Então, eu tô usando mapeamento na assinatura do meu blog que tem mais de um autor, mas acontece que os links mapeados do último perfil que posta no blog estão se repetindo em todos as outras assinaturas… A foto da assinatura até fica, mas o mapeamento não. Será que deu pra entender? Sou meio confusa =( kkkkk Enfim, não sei nem explicar direito, mas será que você sabe qual é o problema? Porque sério, não faço a mínima ideia e já tentei de tudo :/
Obrigada de coração, beijocas ♥
Carla Vieira
Olá Isabella! Eu conversei com a Alessandra e estamos tentando resolver esse problema, ainda não tenho ideia do que seja :/
De nada, beijinhos
Simone Insaurrade
Olá! Encontrei esse post. Porque todas as imagens mapeadas no image maps do meu blog sumiram. http://simoneinsaurrade.blogspot.com você consegue me ajudar?
Um beijo,
Karolaine Martins
nao entendi o que sao essas cordenadas
Carla Vieira
Simone, dê uma olhada no tutorial, principalmente no passo 3. É nesse passo que explico que você não deve utilizar as url's de imagens geradas pelo image-maps e sim pelo blogger para que dê tudo certinho!
Espero ter ajudado <3
Beijos
Carla Vieira
Vou tentar explicar haha
O mapeamento é feito através de diferentes formas, sendo a mais utilizada o "rect", que faz um mapa em forma retangular. A forma como se dá tal mapeamento é através das coordenadas dos pixels dentro da imagem, e não da tela toda. Para cada tipo de mapa usa-se uma técnica de mapeamento diferente. Para se criar em retângulo, deve-se especificar as coordenadas do vértice da parte superior esquerda e do vértice inferior direito (o que é feito pelo programa). Espero que tenha dado para entender!
Beijos <3
Tina
Carla, o que eu tive de rodar para achar, FINALMENTE!!!!! alguém que me ajudasse a resolver o problema no meu blog ref aos links do Image-maps.
Graças a Deus te achei e seu tutorial salvou meu blog…rs
Obrigada, de coração!