,

Menu mapeado no seu blog!

Kemily13:38

Outro tutorial pedido nesse post foi sobre como colocar o famoso menu mapeado! E resolvi responder essa questão também...

Para começar, você terá que ter o seu menu pronto. O meu vai ser esse aqui:


Cada um tem a forma diferente de mapear uma imagem, então vou fazer da minha forma e é a que eu considero a mais simples. 

Eu não uso nenhum programa baixado, eu uso esse site aqui. Mas, antes de tudo você tem que hospedar a sua imagem. Eu sempre hospedo as minha imagens no Tumblr ou no Tinypic.

O link da minha imagem ficou: http://static.tumblr.com/tov1vtx/HiZm1xc7e/tutorial.png.

Agora voltando ao site disponibilizado anteriormente, coloque o link da imagem no campo "Image URL".

Feito isso, você deverá clicar em "New link" e ajustar o "quadradinho" que aparece de acordo com o primeira aba que será feita.

Agora você deverá fazer o mesmo com as outras abas. Sempre clicando em "New Link" e seguindo os passos anteriores.

Pronto! Agora, para finalizar, é necessário gerar o código do menu. E para fazer isso é só descer um pouquinho a página e encontrar o botão "Make Code". Caso você queira ver como ficou o menu, só clicar em "Preview", que está a direita de Make Code.

Copie todo o código que está dentro dessa caixa e cole-a no seu HTML! Fácil, não? E para criar o banner com as imagens você pode usar programas como o Adobe Photoshop, Adobe Fireworks ou até mesmo o Photofiltre. Boa sorte e qualquer dúvida, os comentários estão abertos!

You Might Also Like

0 comentários

Twitter

Instagram