Cambiar imagen al pasar al cursor

Este trukito se trata de mostrar 2 imagenes en el espacio de una al pasar tu cursor por encima de la imagen n.n !!! esta muy padre y le da un toque muy bonito a tu blog.!

Pasa tu cursor sobre la imagen

oki para empezar sigue los siguentes pasos:

Las 2 imagenes deben ser del mismo tamaño !!

Las tienes que alojar en un hosting de imagenes ( yo recomiendo photobucket o imageshack)

Copia el siguiente codigo

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL DEL ENLACE"><img style="display: block;" src="URL DE LA PRIMERA IMAGEN" onmouseover="this.src='URL DE LA SEGUNDA IMAGEN'" onmouseout="this.src='URL DE LA PRIMERA IMAGEN'" /></a>

Pega el codigo en una entrada en la que quieras conseguir el efecto o en un gadget Htlm/javascript.

lo unico que tienes que hacer es cambiar lo que esta entre comillas que es URL DE LA PRIMERA IMAGEN viene 2 veces en el codigo y esa imagen sera la que quede estatica; URL DE LA SEGUNDA IMAGEN, esa sera la cambie al pasar tu cursor..!!

Notita: Donde dice URL DEL ENLACE es opcional es para cuando quieras que la imagen se redirija a algun lugar en especial ya sea a otra pagina o algun sitio de descarga !! si ese es el caso solo cambia donde dice url del enlace por la url del lugar a donde quieres que se redirija n.n !!! ammmm yo solo lo ignore ahahha osea no le puse nada tambien puedes eliminar esa parte oki! espero haberme explicado x.X