Menu em imagem com efeito hover

Como foram muitos pedidos, eu tentei fazer esse tutorial o mais rápido possível para vocês. Todo mundo estava perguntando como eu fiz esse menu dos "extras" do cabeçalho, que é uma imagem, e quando passa o mouse em cima, aparece um texto. Você também pode ver a demonstração aqui neste blog e aqui abaixo:

O tutorial pode parecer meio complicado, mas acredite, deste jeito que eu estou ensinando é bem mais fácil do que de outras maneiras que você pode encontrar na internet. Agradeço muito ao Single Themes pela dica dos códigos. O tutorial está longo porque eu tentei explicar o máximo possível para vocês.

A imagem

O primeiro passo é fazer a imagem do menu. Eu fiz um menu simples no photoshop para fazer este tutorial, que é o que está no blog de demonstrações. Ficou assim:

Essa a imagem do menu em estado normal. Iremos criar uma segunda imagem, de como o menu vai ficar quando passar o mouse em cima. Só que essas duas imagens tem que ficar juntas, uma em cima da outra para o menu funcionar. Mas como faz isso? Eu explico!

Salve a primeira imagem (do menu normal) no formato png. Agora edite essa mesma imagem, que ficou aberta no seu programa de edição (photoshop ou photofiltre) com os efeitos do menu quando passar o mouse. No meu caso, eu só aumentei a sombra dos links e ficou assim:

Salve essa imagem com um nome diferente da primeira imagem. Agora crie uma nova imagem com a mesma largura da imagem do menu e com o dobro da altura. Por exemplo, se o seu menu tem 78 pixels de altura, esta nova imagem deve ter 156 pixels de altura (78+78=156).

Nesta nova imagem você vai colar primeiro, a imagem do menu normal, e colocá-la na parte de baixo, depois cole a imagem do menu hover e coloque-a logo acima, desse jeito :

Clique para ampliar

É importante que elas fiquem exatamente na mesma posição, e que não haja espaços entre uma e outra. Na minha imagem parece que tem espaço, mas não tem, é por causa da sombra que ocupa alguns pixels.

Existem outros métodos para juntar as duas imagens, mas eu resolvi explicar assim para que possa ser feito em qualquer editor de imagem.

Agora nos vamos dividir essa imagem em partes. Cada item do menu tem que ficar em uma imagem separada, com seu estado normal e hover. No photoshop você pode usar a ferramenta fatia (K) e depois que terminar, clicar em salvar para a web. O programa salva automaticamente cada fatia separada. Mas se você não tem o photoshop, pode selecionar cada parte, copiar e colar em um novo documento. Desse jeito é mais difícil e pode acontecer erros, já que não existe uma demarcação de onde termina uma seleção e começa outra, por isso recomendo que baixe o photoshop.

Minha imagem fatiada ficou assim:

Clique para ampliar

E depois de salva, cada link ficou em uma imagem:

Agora é só hospedar suas imagens em algum servidor na web e prosseguir para o próximo passo!

O código HMTL

Finalmente, os tão amados códigos ♥. Esse primeiro código você vai colar onde quiser que o menu apareça. No caso do exemplo deste post, o código foi colocado em gadget de HTML/Javascript abaixo do cabeçalho. O código é o seguinte:

<a href="LINK_DO_ITEM"><img src="http://i49.tinypic.com/e5h5dt.jpg" height="METADE DA ALTURA DO ITEMpx" width="LARGURA DO ITEMpx" class="NOME DO ITEM"></a>

Você vai alterar apenas as partes destacadas do código. Em link do item você vai colocar o link que deseja que abra quando clicarem no primeiro nome. Em metade da altura do item, você irá colocar a metade da altura das imagens do menu, ou seja aquele primeiro número que você dobrou para fazer a imagem do menu completo.

No caso do meu  menu a metade da altura é 78 pixels. Em largura do item, você vai colocar a largura da imagem do primeiro item apenas. No meu caso, a imagem que contém o link "Home" tem 212 pixels de largura. E por último, em nome do item, coloque o nome do link, por exemplo, o primeiro será "home", o segundo "sobre" e assim por diante.

Você vai repetir esse código para cada link do menu, então faça isso com bastante atenção. A única coisa que não vai mudar é a metade da largura do item, que é a mesma para todas as imagens. Quando terminar, salve o gadget. Ainda não vai aparecer nada no seu blog.

Código CSS

Agora é a segunda parte do código. Vá no html do seu blog, e cole o código abaixo antes de ]]></b:skin>

.NOME DO ITEM {
     background: transparent url('IMAGEM DO ITEM') no-repeat bottom center;
     width: LARGURA DO ITEMpx;
     height: METADE DA ALTURA DO ITEMpx;
     margin-left: 0px;
     transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;}
.NOME DO ITEM:hover {
     background: transparent url('IMAGEM DO ITEM') no-repeat  top center;
     width: LARGURA DO ITEMpx;
     height: METADE DA ALTURA DO ITEMpx;
     transition-duration: 0.5s;
     -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;}

Atualizado: Agora tem o código para a transição ficar lenta que nem aqui :)

Esse código você também vai ter que repetir para cada item do menu. Em imagem do item, você vai colocar o link da imagem que foi hospedada. No restante dos campos, você deve colocar as mesmas informações que colocou no código anterior, principalmente o "nome do item" que deve ser o mesmo que você colocou no código anterior.  Em margin-left, você ajusta as margens caso as imagens fiquem com espaços de umas para as outras. Para facilitar o entendimento de vocês, vou colocar o exemplo do código pronto:

No gadget:

<a href="www.cherry-liah.blogspot.com"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" height="78px" width="212px" class="home" /></a>
<a href="http://cherry-liah.blogspot.com/p/sobre.html"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" height="78px" width="121px" class="sobre" /></a>


No HTML do blog:

.home {
     background: transparent url('http://i48.tinypic.com/117zerk.jpg') no-repeat bottom center;
     width: 212px;
     height: 78px;
     margin-left: 0px;}

.home:hover {
     background: transparent url('http://i48.tinypic.com/117zerk.jpg') no-repeat  top center;
     width: 212px;
     height: 78px;}

.sobre {
     background: transparent url('http://i49.tinypic.com/259aicl.jpg') no-repeat bottom center;
     width: 121px;
     height: 78px;
margin-left: -4px;}

.sobre:hover {
     background: transparent url('http://i49.tinypic.com/259aicl.jpg') no-repeat  top center;
     width: 121px;
     height: 78px;}

Visualize como ficou. Se estiver ficado meio desalinhado, faça o seguinte: Antes de  ]]></b:skin> cole este código:

#menuimagem {
width: Largura total do menupx;
height: Altura do menupx;
margin-bottom: -0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}

E no código do gadget adicione <div id="menuimagem"> antes dos outros códigos e </div> ao final de todos os códigos.

Volte para o HTML e ajuste as margens até ficar tudo certinho!

Acabou! Ufa! rs Espero que tenha dado para entender direitinho. Se usarem, creditem.
Muito obrigada pelos elogios ao novo design do blog, fico muito feliz que tenham gostado!

Kissus, Liah