Antes do IMT, mapear imagens era um verdadeiro sofrimento pra quem odeia matemática, já que era tudo com números, recortes exatos de imagens, e combinações complicadas de códigos HTML.
Mas eu tinha descoberto esse serviço há um tempo e guardei nos meus favoritos, já que é algo que sempre se pode precisar não é mesmo?
Hoje precisei, e descobri uns truques para ele simplificar todo o trabalho difícil, e algo que poderia levar uma boa e longa hora, agora leva 5 minutos.Primeiramente, você vai precisar da imagem que quer mapear. Lembrando que mapear imagens é acrescentar diferentes links em diferentes áreas de uma mesma imagem, que serve para fazer menus, cabeçalhos mais interativos, e outras coisas.
Ok, minha imagem vai ser essa, vou mapear para colocar os ícones das redes sociais dos autores, e quero que quando as pessoas cliquem em "Facebook", vá para o perfil do Facebook do autor, quando clique em "Twitter", vá para o Twitter dele, e assim por diante.
.png)
Agora, hospede a sua imagem no Blogger por meio de uma postagem. Eu sei, o IMP tem espaço para upload. Mas não faça upload lá, já que eles só hospedam sua imagem por 48 horas, e depois disso ela é excluída do servidor e você vai ficar a ver navios. Hospede a imagem primeiro, sempre.
Depois de hospedada a imagem, entre neste link, copie a url e cole na caixa:
Depois de carregar a imagem, aguarde os 10 segundos, e clique no link.
Agora, vá na barra lateral da página que se abriu e clique no botão Rectangle.
Arrume o retângulo sobre a parte onde quer que seja o link clicável, e preencha com a página que vai se abrir quando for clicado e nome.
Repita o processo até terminar o mapeamento.
Gere o código HTML
Copie o código, e é só usar ^^
Ah, mais uma coisa: No finalzinho do código, tem uma parte que você deve apagar, ou embaixo dessa imagem vai aparecer um monte de créditos e nomes, e fica muito esquisito.
Veja só o exemplo do meu código e a parte em vermelho que eu vou apagar:
<div style="text-align:center; width:295px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_9201202271236074" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZkxwDb-cx6WaxCoUsRvLrlHKeuhKNMukzzNLWmJxgD26YyEaDfQoszLeIkl31366R_dlR9Fv355dgufA8dtf7LUNKT3HAGe63NCCFHpNlmyfTNklEzfArR9Jikk3RzmedG2aglC_8Mc/s1600/redes+sociais+autor+(a).png" usemap="#Image-Maps_9201202271236074" border="0" width="295" height="124" alt="" />
<map id="_Image-Maps_9201202271236074" name="Image-Maps_9201202271236074">
<area shape="rect" coords="0,5,169,47" href="https://www.facebook.com/profile.php?id=100000511086006&ref=tn_tnmn" alt="Face" title="Face" />
<area shape="rect" coords="0,44,203,86" href="https://twitter.com/#!/amandamazzei" alt="TT" title="TT" />
<area shape="rect" coords="0,88,188,119" href="http://www.blogdamazzei.blogspot.com/" alt="Blog da Mazzei" title="Blog da Mazzei" />
<area shape="rect" coords="293,122,295,124" href="http://www.image-maps.com/index.php?aff=mapped_users_9201202271236074" alt="Image Map" title="Image Map" />
</map>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:295px;">
<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="https://www.facebook.com/profile.php?id=100000511086006&ref=tn_tnmn" title="Face">Face</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="https://twitter.com/#!/amandamazzei" title="TT">TT</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.blogdamazzei.blogspot.com/" title="Blog da Mazzei">Blog da Mazzei</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_9201202271236074" title="Image Map">Image Map</a>
</div>
<!-- Image map text links - End - -->
</div>
Ficando então, assim:
<div style="text-align:center; width:295px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_9201202271236074" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZkxwDb-cx6WaxCoUsRvLrlHKeuhKNMukzzNLWmJxgD26YyEaDfQoszLeIkl31366R_dlR9Fv355dgufA8dtf7LUNKT3HAGe63NCCFHpNlmyfTNklEzfArR9Jikk3RzmedG2aglC_8Mc/s1600/redes+sociais+autor+(a).png" usemap="#Image-Maps_9201202271236074" border="0" width="295" height="124" alt="" />
<map id="_Image-Maps_9201202271236074" name="Image-Maps_9201202271236074">
<area shape="rect" coords="0,5,169,47" href="https://www.facebook.com/profile.php?id=100000511086006&ref=tn_tnmn" alt="Face" title="Face" />
<area shape="rect" coords="0,44,203,86" href="https://twitter.com/#!/amandamazzei" alt="TT" title="TT" />
<area shape="rect" coords="0,88,188,119" href="http://www.blogdamazzei.blogspot.com/" alt="Blog da Mazzei" title="Blog da Mazzei" />
<area shape="rect" coords="293,122,295,124" href="http://www.image-maps.com/index.php?aff=mapped_users_9201202271236074" alt="Image Map" title="Image Map" />
</map>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:295px;">
</div>
<!-- Image map text links - End - -->
</div>
Viram?
Agora, este é o resultado, é só clicar nos links e ir pro meu Facebook, Twitter, e blog.
Bom, espero que tenham gostado, e qualquer dúvida já sabem! É só comentar.
Beijos,
Nenhum comentário:
Postar um comentário