Menu Mapeado

Encontrei essa dica no blog Layout da Sumello. E vou dividir aqui com vocês.









Para fazer esse menu será necessário um editor de imagens. Eu uso o Photofilte Studio, e para o mapeamento uso o GeoHTML – clique para baixar (download disponibilizado pela Sumello).





Gostou, quer aprender? Então vamos lá. Fique a vontade se quiser pegar essa imagem como exemplo. A imagem precisa ser salva em .jpg ou .gif para ser mapeada.

Feito isso abra o GEOHTML e siga os passos da imagem:

(Clique que aumenta)

Agora vou mostrar como mapear.







Obs.: Tem que ter muito cuidado, porque se clicar e soltar o mouse, cria-se o mapa em qualquer lugar.

Agora vamos aos códigos:



Para copiar os códigos e fazer as alterações, vá em Edit > Copy. Cole no bloco de notas e faças as seguintes alterações:

IMG SRC="../../Users/Usuario/Meus documentos/Minhas imagens/menu mapeado amostra.jpg”

Substitua o que está em negrito pela imagem hospedada. Como hospedar? Existem várias formas, a que eu uso é pelo blogger mesmo, se você tem um blog de teste, poste nele a imagem, e com o botão direito do mouse, vá em exibir imagem, novamente  com o botão direito do mouse, vá em copiar endereço da imagem. Feito isso, cole esse endereço no lugar desse trecho em negrito, tomando cuidado para não apagar nenhuma “.

Agora vem as coordenadas e os links.

Onde tem um # substitua pelo link. Uma dica: Se você começou a seleção do mapeamento da esquerda para direita, coloque os links de baixo para cima.

Exemplo: A imagem começa com “Inicio” e termina com “ Trabalhos entregues”. Se no momento de selecionar o quadrinho com o mouse, você selecionou primeiro o quadro Início, nas coordenadas o primeiro link que você vai inserir é Trabalhos entregues, o último item, isso porque o mapeamento faz as coordenadas do fim para o começo, ou seja, seleciona da esquerda para direita e coloca os links na ordem contrária. Depois de tudo feito, é hora de instalar.

Instalando no blog.

Vá em painel, design, elementos da página , adicionar um gadget HTML JavaScript.  e cole todo o código alterado  nessa janela que aparece, e salva.

Esse menu pode ser usado tanto como cabeçalho, como menu na barra lateral (sidebar), para usar no cabeçalho, é preciso que tenha como inserir gadget abaixo do cabeçalho. Veja como fazer isso aqui no Mundo Blogger. Para ficar um efeito bonito, será necessário esconder o cabeçalho, para isso procure por:



* Header

E no final de cada código, como:



#header-wrapper {



#header h1 {

#header .description {



coloque isso:

display:none (sempre antes dessa chave) }

Isso fará com que o titulo, a imagem e a descrição, fiquem ocultas, dando lugar ao mapeamento.

Espero que tenham gostado da dica. Lindo fim de semana!