Post sobre |Dicas blog, Pc windows

Menu animado, imagem aumenta on-mouse

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:

Imagem antes de passar mouse e ao retirar o mouseImagem texto ao passar rato
Imagem texto ao passar Mouse-OverImagem text ao tirar o Mouse-menos

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. Talvez criar uma imagem "escondida" antes, ou seja de 0px, isso fará o navegador baixar a imagem e quando passar o mouse ele não precisará fazer isso.

Aumentar a fonte do texto com um clique de mouse

busca por vírus arquivo no computador

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 veja o código que eu usei para os efeitos que estão aqui, com endereços Url da imagem(não confunda o código com o nome da imagem que contém 'MouseOvermenos', por acaso usei esse nome nas imagens):

<img src="http://1.bp.blogspot.com/_NrcfzTud13U/SFtw1mA57bI/AAAAAAAAAGY/U7fhZiLgIwU/s200/cooltext86958530MouseOvermenos.PNG"
onmouseover="this.src='
http://4.bp.blogspot.com/_NrcfzTud13U/SFtxJZIBgzI/AAAAAAAAAGg/OaItc256cCo/s320/cooltext86958530MouseOver.png';"
onmouseout="this.src='
http://1.bp.blogspot.com/_NrcfzTud13U/SFtw1mA57bI/AAAAAAAAAGY/U7fhZiLgIwU/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.

19 comentários:

Menu animado, imagem aumenta on-mouse2008-06-20T05:53:00-03:00
  1. Estou com um probleminha Usando o DW 8. Tenho uma tabela com uma relaçao de peças e gostaria de passar o mause sobre o texto e aparecer uma imagem

    Responder
  2. Obrigado pelos comentários,

    Adriano, Esses softwares são bons para "automatizar" o trabalho e até mesmo pra criar páginas ou objetos em flash, mas, é importante você procurar entender os códigos, não precisa ser um expert, mais tentar coisas novas abre a mente e você não fica muito dependente, aumenta a facilidade de aprender, etc. Entender um pouco de css, procurar scripts, fazer testes com imagens e HTML, é bom para imaginar e criar possibilidades e entender possíveis erros.
    Eu olhei esse site que você indicou e acho que o menu que se encontra na página inicial deveria estar em todas as outras também.
    Eu não sei bem o que você quer mas da uma olhada nessa página http://lizandrob31.googlepages.com/aumenta-imagem.html .
    Pelo que entendi é mais ou menos isso.

    Responder
  3. valeu pela postagem,
    muito boa.

    Responder
  4. Procurei isso na INTERNET INTEIRAAAAAAAAAAAAAA puta cara vc é foda vlw mesmo

    Responder
  5. entra ai no meu blog:
    loucopormusicas.blogspot.com

    ainda ta em "construção"

    Responder
  6. Anônimo14/8/09

    isso e Dhtml nada de mais

    Responder
  7. Amei todas as sugestões! Não sou jovem, tenho 52 anos, mas gosto demais de estar lendo e interagindo com quem gosta de blog. O meu é só de Poemas ... lindo! Poemaas de minha autoria. Literaturamariamarlene.blogspot.com Sou Prof. d Português. Tucuruí-Pará. Bjos com carinho... Valeu!

    Responder
  8. cara teria como explicar melhor como fazer para imagem "on mouse" carregue antes... não intendi mano. Parabens pelo post, procurei isso por muito tempo ^^ um abraço!!!

    Responder
  9. Obrigado pelos comentários.

    tWo
    O problema é a imagem que aparece ao passar o mouse(onmouseover), você pode colocar ela novamente abaixo das outras e sozinha, assim como você faz para colocar uma imagem comum, porém nela você coloca um width="0"

    O que acontece é que você terá o botão normal com imagem que aumenta ou muda ao passar o mouse e abaixo dele você tem uma imagem com a segunda imagem que usou no efeito do botão, porém, tão pequena que ninguém vê ela, mas o navegador já fez com que ela tenha sido baixada, então quando o usuário passar o mouse ela não precisa ser baixada, aparecendo mais rapidamente.

    O código da imagem para "pré-carregar" ficaria parecido com esse:

    <img src="ENDEREÇO DA IMAGEM MAIOR OU SEGUNDA.png" height="0"
    width="0" />

    Se você vai fazer isso possivelmente irá usar código e a opção Html/Javascript do blogger, e poderá adicionar o código da imagem abaixo no mesmo gadget.

    É bom também usar um alt="texto do link" e talvez até um title="texto geralmente amarelo pro usuário ver quando passa o mouse"
    Essas frases que adicionei entre aspas é exemplo e deve ser substituído, vamos supor que o link seja para a página inicial, você colocaria página inicial, home ou o nome do blog "dentro" das aspas.

    Responder
  10. Parabéns por esta dica. Excelente

    Responder
  11. Amigo eu estou con um problema quando eu passo o mouse sobre a imagem ela fica grande soh q na hora q eu tiro o mouse a imagem continua grande o que eu fasso?

    Responder
  12. Teygle

    Cuidado com códigos, uma vírgula ou qualquer caracter faltando ou a mais pode fazer não funcionar.

    Tenha certeza que você adiciomou o endereço completo da imagem menor logo após esse trecho de código:
    onmouseout="this.src='

    Responder
  13. O MEU DEU CERTO MUITO OBRIGADO

    Responder
  14. Muito obrigado pelo código, eu tava procurando a um tempão!

    Responder
  15. caro estou com problemas quando ao menu, toda vez que se coloca o mouse emcima das imagens do menu elas desaparecem. veja como está ai olha dcmcry.blogspot.com

    ajude-me por favor.

    Responder
  16. aguardo!!!!!!!!!SE POSSIVEL RETORNE LOGO.

    Responder
    ...Respostas
    1. Para o efeito funcionar, a segunda imagem precisa ser uma imagem que existe, ao passar o mouse a primeira imagem some e aparece a segunda imagem, se a segunda imagem não existir ou se o Url da segunda imagem estiver incorreto, aí o efeito não funciona.

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!