link aumentar mudar imagem dhtml onmouse

Esse link pode ser útil, já que ele faz o efeito de mudar, aumentar ou apresentar uma imagem escondida, usando algumas tags fáceis de aplicar e entender, tags javascript ou DHTML.

Vou mostrar duas maneiras diferentes de utilizar:


1º, o usuário passa o mouse sobre uma imagem e aparece outra, assim que ele retira o mouse da imagem volta a imagem anterior, causando ou efeito de mudança de imagem ou a ilusão de aumentar a imagem.

<A HREF="http://seusite.com/etc/pagina">
<img src="ENDEREÇO DA IMAGEM 1 menor .png .JPEG .GIF"
onmouseover="this.src='ENDEREÇO DA IMAGEM 2 MAIOR .png .JPEG .GIF';"
onmouseout="this.src='ENDEREÇO DA IMAGEM 1 menor .png .JPEG .GIF';" />
</A>

2º, passando o mouse sobre a imagem, aparece outra, e, essa permanece, a utilidade desse efeito poderia ser usado para que a página carregue mais rápido.

<A HREF="http://seusite.com/etc/pagina">
<img src="ENDEREÇO DA IMAGEM 1 menor .png .JPEG .GIF"
onmouseover="this.src='ENDEREÇO DA IMAGEM 2 MAIOR .png .JPEG .GIF';"/>

</A>

Para entender, esse código <a href=" é o link , e http://s... é o endereço do link, ou seja, a página onde a pessoa irá ao clicar no link-imagem:
<A HREF="http://seusite.com/etc/pagina">

Esse código "puxa(faz aparecer) imagem na pagina" <img src=" ENDEREÇO DA IMAGEM o correto é algo como "http://foitestado.com/412223.GIF"

<img src="ENDEREÇO DA IMAGEM 1 menor .png .JPEG .GIF"
onmouseover="this.src='ENDEREÇO DA IMAGEM 2 MAIOR .png .JPEG .GIF';"/>

fim do código link </A>

Agora vejam as imagens do 1º efeito
Para o primeiro efeito talvez seria interessante criar uma imagem "escondida" antes, ou seja de 0 px, isso fará o navegador baixar a imagem e quando passar o mouse ele não precisará fazer isso.


Se quiser ver outro ponto de vista ou confundir mais clique aqui