Enlaces de imagenes con efectos al pasar mouse

En este poste aprenderemos como agregar efectos a las imágenes para que parezcan animadas cuando el cursor del mouse se ubique sobre ellas. De esta manera espero solucionar una duda que me fue planteada hace poco y que resolveremos usando algo de Javascript, una pizca de CSS y un código modificado de HTML. Pasar el mouse sobre las imágenes siguientes.

                  
Para lograr este efecto necesitamos dos imágenes, la que se muestra por defecto y la que se muestra cuando el cursor del mouse se posiciona sobre la imagen. El enlace de la imagen sería algo como el siguiente código:

<a href="direccion_URL"
  onmouseout="getElementById('nombreUnico').src='URL_imagen_FIJA';"
  onmouseover="getElementById('nombreUnico').src='URL_imagen_ANIMADA';">
  <img class="img_anim" id="nombreUnico" src="URL_imagen_FIJA"/>
</a>

Ese código debe ser escrito todo de corrido y en una sola línea, de lo contrario Blogger interpretará saltos de línea y generará un salto </br> que les malogrará todo el efecto. Además deben tener en cuenta que el nombreUnico es una cadena de caracteres que les recomiendo sea numérico (por ejemplo 51651165154) y único para cada par de imágenes a las que se le añada este efecto.

Citando a JMiur:

La imagen fija se mostrará como la imagen por defecto; cuando el puntero del ratón pase sobre el enlace (onmouseover), el script cambiará la dirección de esta y se mostrará la imagen animada. Cuando el puntero del ratón salga de encima del enlace (onmouseout), el script volverá a cambiar la dirección y mostrará la imagen fija.

Luego buscaremos la etiqueta </head> en nuestra plantilla (Panel> Diseño> Edición de HTML) y añadiremos justo antes de ésta el siguiente código CSS:

<style type='text/css'>
.img_anim{
  border: 0px;
}
</style>

Este código evitará que las imágenes que pongamos usando este código adquieran a su alrededor un border azul intenso (propio de las imágenes que actúan como enlaces). Seguiremos con un código más que aunque no es obligatorio puede ayudar a que se logre un mejor efecto (yo en este post no lo he usado).

Ahora lo siguiente es implementar un código Javascript que servirá para optimizar la carga de las imágenes que se mostrarán en el evento onmouseover, de lo contrario, en el momento que se pase el mouse sobre la imagen recién se iniciará la carga de la imagen animada y se verá mal. Todas las imágenes que deseamos sean cargadas a nuestro blog serán añadidas a un arreglo en un código Javascript que se colocará antes de la pestaña </head> de su plantilla (igual que el código de CSS, el orden no es importante, pero ambos deben ir antes de la etiqueta indicada).

<script type='text/javascript'>
  var animPic=new Array();
  animPic[0]=new Image(ancho0,alto0);
  animPic[0].src="URL_imagen_0";
  animPic[1]=new Image(ancho1,alto1);
  animPic[1].src="URL_imagen_0";
  .............
  animPic[N]=new Image(anchoN,altoN);
  animPic[N].src="URL_imagen_N";
</script>

Donde N es la cantidad de imágenes que vayan agregando y ancho1 y alto1 son respectivamente el ancho y el alto de las imágenes que se están cargando. Con eso ya debe funcionar y quedarles como les he mostrado en las imágenes al inicio de este post. Si tienen dudas pueden consultar y juntos solucionaremos sus problemas ;).