Cambiar la imagen al pasar el cursor

En La Trucoteca de blogs vi una entrada en la cual nos explican como cambiar de imagen al pasar el cursor. Es muy fácil hacer lo que ellos nos enseñan, y también es muy útil este efecto y para personalizar nuestros blogs nos servirá de mucho, es por eso que en la entrada de hoy les explicaré como hacerlo.

Para utilizar este efecto deben pegar lo siguiente en un nuevo gadget HTML/Javascript:

<a href="enlace" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img border="0" onmouseout="this.src='URL de la primer imagen'" onmouseover="this.src='URL de la segunda imagen'" src="URL de la primer imagen" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" /></a>

Modificaciones obligatorias:

• En donde dice enlace deben poner la url del enlace que quieran y donde dice URL de la primer imagen deben poner la primer imagen, osea la que se verá a simple vista (aparece dos veces en el código).
• Donde dice Url de la segunda imagen deben poner la imagen que se verá cuando coloquemos el cursor sobre ella.

Preferiblemente, las imagenes deben ser del mismo tamaño ya que sino se desconfigurará todo en el post, aunque funciona de cualquier forma.