Como Mapear Facilmente uma Imagem no Image Map Tool
Autor: Dedessa Carvalho  | Publicado: 2013-01-23T13:52:00-08:00





Ooi *--* Hoje eu vou ensinar a mapear uma imagem. Se você não sabe o que é isso, aí vai: você já viu em algum blog um menu dentro do cabeçalho, um menu que faz parte da imagem? Bom, provavelmente essa pessoa mapeou o seu cabeçalho para fazer com o seu menu funcione dentro dele. Se acalmem, é bem fácil de fazer e vocês não vão precisar mexer no HTML de seus blogs! Além disso fiz um cabeçalho base super fofinho da Demi para mostrar através dele como mapear uma imagem e o melhor de tudo: vocês poderão usar o cabeçalho base em seus blogs &lt;3 Vamos lá, então...

ATENÇÃO: Esse tutorial não serve apenas para mapear cabeçalhos e sim para mapear qualquer imagem que você quiser.








Gostou do cabeçalho acima e quer usá-lo no seu blog? Você pode, desde que siga essas regras: não reblogue o cabeçalho de maneira nenhuma, não retire os créditos do cabeçalho (LS) e dê os créditos à Lovelly Summer em algum lugar visível do seu blog. Se vai usá-lo, aí vão umas dicas: Coloque o nome do seu blog no balão de fala cor-de-rosa. Abaixo do "Essa sou eu" coloque uma foto sua e uma breve autobiografia. Nos quadradinhos pretos coloque três vídeos que você goste da Demi (veja como fazer isso com esse tutorial, aqui). No local onde está o menu você deve mapear a imagem (o que vou mostrar nesse tutorial). Esse cabeçalho funciona melhor em blogs de 1030 pixels de largura. Para ajustar o tamanho do seu blog vá em: Painel, Modelo, Personalizar, Ajustar Larguras, na parte "Todo o Blog" deixe com o tamanho 1030. OBS: Veja como deixar o cabeçalho transparente, aqui.

1º- Antes de mais nada você deve criar o seu cabeçalho normalmente. Inclua o menu no seu cabeçalho (use a criatividade e faça um menu bem legal). Aí em cima está o cabeçalho que eu fiz para mostrar como mapear a imagem (notem que eu fiz o cabeçalho com o menu já nele). Vocês podem usar o cabeçalho que eu fiz da Demi desde que sigam as instruções que estão abaixo da imagem da base.







2º- Quando terminar de fazer a sua imagem vá no site do Image Map Tool, clique aqui para entrar. Clique em "Escolher Arquivo" e selecione a imagem do cabeçalho que você fez. Quando fizer isso, clique em "Start Mapping Your Image".











3º- Espere alguns segundos e depois aperte em "Continue to Next Step". Abaixo do quadradinho "File upload" era para aparecer a sua imagem , mas não se preocupe se aparecer apenas esse símbolo como o da imagem acima, pois geralmente a imagem não carrega quando é muito grande (como um cabeçalho).







4º- Antes de mais nada você deve deixar desmarcadas todas as opções que estão abaixo de "Advance Tool Box" como mostrado na imagem. Sua imagem deve carregar no lado esquerdo da página, se ela não carregar, nesse passo isso representará um problema, então tente fazer tudo outra vez a partir do passo 2.







5º- Clique em "Rectangle".







6º- Vai aparecer um quadrado, coloque-o em cima do lugar que você quer mapear (selecione o tamanho do quadrado mexendo nos quadradinhos que estão ao seu redor). No espaço "Link for this map:" coloque o link que você quer que abra quando alguém clicar nessa área, por exemplo: na imagem estou mapeando a parte onde está escrito "Início", se eu quiser que quando alguém clicar em "Início" seja redirecionada para o início da Lovelly Summer vou colocar:&nbsp;http://lovellysummer.blogspot.com no espaço em branco. Na parte "Title/Alt for this map" coloque o que você quer que apareça quando colocar o mouse em cima da palavra "Início", pode ser: "Volte para o começo do blog", por exemplo. Você também pode deixar esse espaço em branco, se preferir. Quando terminar clique em "Save".







7º- Vá mapeando o resto do menu seguindo os passos 5 e 6. Ao terminar clique em "Get Your Code".







8º- Clique em "HTML Code" que está no topo da página. Em um quadrado aparecerá o código da sua imagem mapeada, agora é só colocar o código onde quiser!











1º- No painel do seu blog vá em "Layout".







2º- No gadget do cabeçalho do seu blog clique em "Editar". Vai aparecer uma janela pop up. Na parte "Imagem" clique em "Remover Imagem" e deixe a opção "Em vez de título e descrição" marcada.







3º- Marque a opção " Da Web..." e no quadradinho que está abaixo disso cole isso aqui.

Essa URL é de uma mini imagem transparente que eu fiz e vai ficar no lugar do seu cabeçalho. Depois que a imagem carregar (você vai saber quando tiver carregado quando aparecer o link "Remover Imagem") e então clique em "Salvar".







4º- Clique em "Adicionar um Gadget" que está logo abaixo do gadget do seu cabeçalho. Na janela pop up que abrir clique no "+" que está ao lado de HTML/JavaScript.







5º- Deixe o campo onde tem "Título" em branco. No campo "Design" cole o código do seu cabeçalho, aquele que você encontrou no passo 8 do tutorial acima. Clique em "Salvar". Agora clique em "Salvar Organização" na página do Layout do seu blog e prontinho!



Espero que tenham gostado, qualquer dúvida é só comentar <3 p="">