Menu em imagem com estado hover

Hoje eu ia postar pra vocês um Big tutorial de como montar um template teen mas acho que com pressa não ia sair muito bom, então pensei, por que não trazer o código do meu menu que algumas pessoas pediram? E é isso que vim trazer hoje. Quando fiz o meu menu, se não me engano usei como base um código que vi lá no Trashy Girl. Esse menu é muito bom - e fácil - de usar, e a graça dele está no estado hover, que nada mais é que a mudança da imagem (texto ou link em outros casos) ao passar o mouse. Você pode usar esse código pra outras coisas também, não apenas para fazer um menu.

Abaixo segue um exemplo de como ele fica. Passe o mouse para visualizar o efeito.

Clique em leia mais para ler o tutorial.
Vá em Design, e em elementos da página adicione um gadget de HTML/JavaScript e cole o seguinte código fazendo as devidas alterações:

<center><a href="link do seu blog"><img src="URL da imagem normal" onmouseout="this.src='Repita a URL da imagem normal';" onmouseover="this.src='URL da imagem no estado hover';" /></a></center>

• Onde pede "link do seu blog" troque pelo link da página que você desejar.
• No lugar de "URL da imagem normal" é a url da imagem sem passar o mouse e onde pede "repita a URL da imagem normal" é a mesma coisa.
• Já em "URL da imagem no estado hover" coloque a imagem que você quer que apareça ao passar o mouse.
• Se você NÃO quiser o menu centralizado é só retirar as tags do começo e do fim, <center> e </center> respectivamente.

Fiz algumas imagens correndo mas vocês podem fazer as imagens de vocês, mas é importante que todas tenham a mesma altura e que a posição das letras fique o mais semelhante possível.

Imagem normal                Imagem hover 

E pode usar de divisória essa aqui: 

E então gostaram? O que mais vocês querem ver por aqui? 

Beijos, fiquem bem.