menu animado

Vou mostrar um menu animado, fácil, que ao passar o mouse a imagem "aumenta", que pode ser usado também para apresentação de imagem.
Se pensar um pouco, um menu assim, usando duas imagens para cada link ficaria meio pesado pra quem tem internet de baixa velocidade, mas o efeito de aumentar a imagem pode ser usado para uma funcionalidade especifica do site, tipo um botão pra Rss, etc.

Primeiro as imagens sem animação que irei usar:

Os dois primeiros exemplos são com .png, ja os dois últimos um é .gif e ultimo .jpg.
Se gostou faça alguns testes com diferentes tipos de imagens, em mais de um navegador, dando preferência ao Internet Explorer e Mozilla, Opera também vale...
Use uma pasta, crie um arquivo html e imagens nessa pasta, é mais rápido...

Agora passe o mouse nessa imagem abaixo

E vai parecer que ela aumenta, mas na verdade aparece a cópia dela(maior):






Os dois abaixo funcionam no Mozilla, só que demorou um pouco para mudar a imagem, talvez eu esteja com muitas janelas e abas abertas.
Se for usar esse efeito em um blog com muitas imagens ou usar imagem grande para esse efeito é importante fazer com que a imagem que irá aparecer ao passar o mouse seja carregada antes, ou irá acontecer como abaixo, você passa o mouse e ela demora para mudar. Talves criar uma imagem "escondida" antes, ou seja de 0 px, isso fará o navegador baixar aimagem e quando passar o mouse ele não precisará fazer isso.

O código é o mesmo, o que muda é a imagem, deve ter cuidado com as "aspas" 'aspas' modifique só o endereço da imagem que está em vermelho.

Aviso: No Mozilla esse código não está com quebra de linha, eu não quis usar BR por que em algumas situações isso acaba inserindo um espaço ao ser copiado, por isso certifique-se de selecionar o código até uma linha após seu termino, para garantir que copiou todo ele.


<img src="ENDEREÇO DA IMAGEM menor .png .JPEG .GIF"
onmouseover="this.src='ENDEREÇO DA IMAGEM MAIOR .png .JPEG .GIF';"
onmouseout="this.src='ENDEREÇO DA IMAGEM menor .png .JPEG .GIF';" />
O código é esse acima(falta endereço da imagem) e ele tem tags com JavaScript, mas não precisa escrever nem um script, porém o efeito pode não funcionar em alguns navegadores de Internet mais antigos.

Ou o que eu usei, com endereços(não confunda o código com o nome da imagem que contém MouseOvermenos por acaso):



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpM8f2ncenhSzlLrEYqwS7cLB9nym1gczMU0HCrZC7_xMM8f6xLWORiq83siJ2vSBGgJI7swUF4q8L6DvtI7M8v93VRcx07mWuJLKpyMIZu5GUloZhyIsuV_EbSb6r4FkhCweEeSbo-Cpf/s200/cooltext86958530MouseOvermenos.PNG"
onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN8KAWoP_SZTavCjwqHTF6MWXBMT7YCDJueV8qojq88t8AacbTsOl5LmoZdhGOU6P_qh7PQaIJQPooBuFyuNLTZ-8gX5OUkRsQfnTbyeyBmEd5bULz1L_jSS0Vhb0g0j_2R24M3fbH8nf7/s320/cooltext86958530MouseOver.png';"
onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpM8f2ncenhSzlLrEYqwS7cLB9nym1gczMU0HCrZC7_xMM8f6xLWORiq83siJ2vSBGgJI7swUF4q8L6DvtI7M8v93VRcx07mWuJLKpyMIZu5GUloZhyIsuV_EbSb6r4FkhCweEeSbo-Cpf/s200/cooltext86958530MouseOvermenos.PNG';" />
Para usar como link coloque <a href="ENDEREÇO DO BLOG OU PAGINA"> antes do código acima e depois do código </a> .



Duas dicas com relação a menu, uma é que esses botões podem ser feitos nesse site , que é o mesmo que faz logotipo grátis(escolha a opção botões).


Esse menu tem funcionamento igual ao menu que muda de cor usando tag JavaScript.