Efecto Rollover sencillo en JQuery
Como varios me habeis pedido que publique cosas sobre JQuery (ya se sois unos vagos y no os gusta leeros manuales :p) voy a ir poniendo programitas sencillos para que veais lo fácil que es “crear” cosas usando este potente Framework de JavaScript.
En esta entrada vamos a hacer un sencillo efecto de rollover en una imagen. La imagen se cargará de inicio. Cuando pasemos el ratón por encima (onmuseout en JavaScript), dicha imagen cambiará a otra y cuando abandonemos el espacio que ocupa (onmouseout) se volverá a la imagen inicial.
Hacer esto en JavaScript es relativamente sencillo (como se ha visto en clase). Hay que hacer un par de funciones (una para cada evento del ratón) y jugar con el atributo src de la imagen.
Con JQuery es mucho mas rápido. No hace falta indicar ningún evento en el HTML y vamos a tener listo el efecto en una sola función.
Preparación
Lo primero es colocar una imagen en nuestra página con su respectivo ID:
<body>
<img id="foto" src="images/original.jpg" />
</body>
A continuación, en la cabecera enlazamos el fichero jquery.js y abrimos las etiquetas necesarias para que el efecto esté disponible tan pronto como se cargue la página (como window.onload en JavaScript):
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Aqui va el código del efecto
});
</script>
Ni que decir tiene que, a la hora de enlazar el fichero jquery.js, se debe poner la ruta relativa de este (habiendolo descargado previamente desde aqui) o poner la URL donde esta alojado. Esto está mas que visto en clase 
Programando el efecto
Lo que nos queda es programar el efecto. Para ello vamos a poner el código donde os he indicado en el paso anterior (dentro del $(document).ready):
$('#foto').hover(
function() {
$('#foto').attr("src","images/cambio.jpg");
},
function() {
$('#foto').attr("src","images/original.jpg");
}
);
Para los que no sepan aún como va el JQuery os explico a grandes rasgos como funciona:
- Con
$('#foto')se selecciona la etiqueta cuyo ID sea foto (como ungetElementByIden JavaScript). $('#foto').hoverindica que se va a crear un rollover y necesita dos funciones. La primera será la que se haga cuando se ‘entre’ en la imagen y la segunda, cuando se ‘salga’.- Con
$('#foto').attr("src","ruta")tocamos el atributo SRC del elemento seleccionado.
Como veis, todas las ordenes de JQuery son mucho más intuitivas que las de JavaSCript (y mas cortas de escribir)
Os dejo el ejemplo completo para descargarlo: Ejemplo rollover