Mapeamento de imagens com Image Maps (sem erro)

23 de nov de 2014
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:

19 comentários:
  1. ó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

    ResponderExcluir
    Respostas
    1. Que legal Gisela, faça siim, eu adoro mapeamento!

      Beijos

      Excluir
  2. 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/

    ResponderExcluir
    Respostas
    1. Obrigada! Agora você não se perde mais haha
      Beijos

      Excluir
  3. Obrigada pela dica, veio em boa hora =D

    ResponderExcluir
    Respostas
    1. Que bom que veio em boa hora Clay!!! :D
      Beijos

      Excluir
    2. 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,

      Excluir
    3. 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

      Excluir
  4. era isso que eu precisava na minha vida hahahaa
    Obrigada amore <3

    ResponderExcluir
  5. 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

    ResponderExcluir
    Respostas
    1. Eu também adoro, fica muito legal HAHA
      Obrigada, sério isso ajuda muito, acho que todo mundo precisa saber!
      Beijos

      Excluir
  6. 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"? :D

    Obrigada, beijocas.

    ResponderExcluir
    Respostas
    1. Ai, lerdeza minha, já consegui! hahaha :3

      Excluir
    2. Tem sim ♥, você adiciona dentro de <a o target="_blank", mas você ja conseguiu :D :D

      De nada, beijos e obrigada por visitar o meu cantinho haha

      Excluir
  7. 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 ♥

    ResponderExcluir
    Respostas
    1. Olá Isabella! Eu conversei com a Alessandra e estamos tentando resolver esse problema, ainda não tenho ideia do que seja :/

      De nada, beijinhos

      Excluir
  8. nao entendi o que sao essas cordenadas

    ResponderExcluir
    Respostas
    1. 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

      Excluir

 
Todos os direitos reservados © - Tecnologia do Blogger Layout e desenvolvimento por Carla Vieira · Ilustração por Laura Melo