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. 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.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7tst30gSs5UdsryBHrycfgIjwnZH5n7l8wYVNgbLwwEUeq8gscTDW2iF8QBK4FrMFrLmq2ZpczMoS3KnzLNyznJvOR6YU-8a0s2zS3jXsU2_0U-bZtccZXR9sAPb2bZqJuzXUxARxu7Yz/s200/cooltext86958530MouseOvermenos.PNG"
onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9gUVsxYpxHMN_levKkZrJseHf8ieoow7Mpm9MFWi5rsa8FpV9NulptONmEUZVbKXP__OuSRdTiIQJNGlzKwi-C3Joyc3FZeCzrH9xD31RnYsgXJvJVk-hZ8y0TVr-7Fw83wUPaqrBzbJ/s320/cooltext86958530MouseOver.png';"
onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7tst30gSs5UdsryBHrycfgIjwnZH5n7l8wYVNgbLwwEUeq8gscTDW2iF8QBK4FrMFrLmq2ZpczMoS3KnzLNyznJvOR6YU-8a0s2zS3jXsU2_0U-bZtccZXR9sAPb2bZqJuzXUxARxu7Yz/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.
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
ResponderExcluirgostei
ResponderExcluirObrigado pelos comentários,
ResponderExcluirAdriano, 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.
valeu pela postagem,
ResponderExcluirmuito boa.
Procurei isso na INTERNET INTEIRAAAAAAAAAAAAAA puta cara vc é foda vlw mesmo
ResponderExcluirentra ai no meu blog:
ResponderExcluirloucopormusicas.blogspot.com
ainda ta em "construção"
valeu!!!
ResponderExcluirisso e Dhtml nada de mais
ResponderExcluirAmei 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!
ResponderExcluircara 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!!!
ResponderExcluirObrigado pelos comentários.
ResponderExcluirtWo
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.
Parabéns por esta dica. Excelente
ResponderExcluirAmigo 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?
ResponderExcluirTeygle
ResponderExcluirCuidado 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='
O MEU DEU CERTO MUITO OBRIGADO
ResponderExcluirMuito obrigado pelo código, eu tava procurando a um tempão!
ResponderExcluircaro 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
ResponderExcluirajude-me por favor.
aguardo!!!!!!!!!SE POSSIVEL RETORNE LOGO.
ResponderExcluirPara 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.
Excluir