¡Hola! Mi nombre es Nelly Natalí y este es mi blog personal.

Si quieres saber más sobre mí también puedes cotillear mis perfiles en twitter y linkedin.

Categorías
Maquetación

Javascript vs CSS: Rollover de imágenes

A la hora de hacer un rollover de una imagen, ¿qué es mejor? ¿Javascript o CSS? Estas preguntas las he visto en muchos sitios y me apetece dar mi versión ^^

De primeras creo que los dos métodos son geniales, sólo que hay que adaptarlos a su caso, vamos a ver los dos:

Rollover con CSS viene muy bien para una o unas cuantas imagenes, sin enlaces, ya que nos ahorramos tener que programar una función (tres en este caso) y resulta mucho más fácil de manipular.

Para hacer un rollover con css vamos ha hacer aparecer ésta cómo fondo de un bloque. El html:

<div id="miavatar"></div>

Puedes ponerle el nombre que quieras, igual que si prefieres una ‘clase’ a una ‘id’. El css:

#miavatar {
width: 178px;
height: 178px;
background-imagen: url(imagena.jpg);
}
#miavatar:hover {
background-image:url(imagenb.jpg);
}

Con ‘hover’ especificamos que está el cursor encima de ese div.
El ejemplo de lo que acabo de poner sería tal que así..

(*) Aprovecho para poner mi careto en manga que está tanto de moda.. xD

Un problema de aplicar rollover a través de css es que si cargamos muchas imágenes (y pesadas) para que aparezcan, tardarán más de la cuenta en aparecer, por lo que cuando se pase el ratón por encima no aparecerán al momento, sino que tardarán.

Bueno, paso a la otra acera, rollover de imágenes con Javascript. Este es imprescindible cuando queremos cambiar una imagen sin que sea fondo, sino a través de la etiqueta img (muy útil si tenemos la imagen enlazada a alguna url).

Lo primero añadir las funciones dentro del <head>, no són cosecha mía, éstas funciones las puedes encontrar en multitud de páginas, pero cómo funcionan realmente bien, voy a ahorrarme tiempo en reinventar lo inventado :P

La primera función la necesitaremos en la tercera, para que cree un objeto javascript de nuestras imagenes a cargar y así no tener que esperar a que aparezcan cuando pasemos el ratón por encima, de aquí no tenemos que modificar nada:

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

En la segunda es donde está la chicha, aquí se indica que se tiene que hacer el cambio de imagen:

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

Y en la tercera y última, indicamos las imagenes que se tienen que cargar al entrar en la página, se pueden poner tantas cómo quieras, cada una con un nombre distinto, eso sí.

var preloadFlag = false;
function preloadImages() {
if (document.images) {
imagenb = newImage("imagenb.jpg");
preloadFlag = true;
}
}

Por último indicamos que se cargen al entrar en la web:

window.onLoad=preloadImages();

Y este es tódo el código que iría en nuestro head, una vez puestas las funciones ya podemos usarlas en todas las imágenes que queramos, adaptándolas de esta forma:

<a onmouseover="changeImages('nombreimagen', 'imagenb.jpg'); return true;" onmouseout="changeImages('nombreimagen', 'imagena.jpg'); return true;" href="direccion.php" title="">
<img name="nombreimagen" src="imagena.jpg" alt="" /></a>

Donde imagena es la imagen que aparece por defecto, e imagenb la que aparece al pasar el ratón por encima, recordad que cada imagen (y su enlace) deben de llevar un ‘name’ único, mientras se vayan añadiendo más, hay que ponerles nuevos ‘names’.
También decir que onmouseover aplica la función cuando está el ratón por encima y que onmouseout lo hace cuando el ratón sale de encima..

Y.. creo que no me dejo nada, el ejemplo de javascript no lo pongo ya que es practicamente «igual» al de css.. supongo que os haréis una idea ;)

5 respuestas a «Javascript vs CSS: Rollover de imágenes»

buena explicación, pero hay otra forma también muy sencilla.
Sería como el rollover de css pero en lugar de cambiar la foto lo que puedes hacer es una misma imagen con las dos versiones juntas, ya sea arriba o de lado y con los css cambias la posicion del fondo o imagen.
Esta solución se utiliza mucho para aliviar al servidor, ya que cada imagen hace una conexión y así te libras de conectar dos veces y lo haces una sola.
Eso lo utiliza, asi a vuela pluma..gmail: http://mail.google.com/mail/images/2/5/c/icons1c.png

Saludos a Mateo :)

Holitas infonomada!
Gracías por la alternativa, la verdad, había oído hablar de esa forma pero nunca lo he probado, ya que me cuentas que alivia al servidor tendré que adaptarme, todo sea por su salud xD
Mateo te manda saludos también, me ha contado que trabajastes con él, me había rallado al leer tu comentario por que no sabía quién eras, pero ya lo sé ^^
Espero leerte más por aqui! Saludos!!

Si es que mi amorsito es el mejor :P
Ohh es cierto lo de Alejandra, que fuerte, hace mil que no la veo, no la hagáis trabajar mucho! jaja
Me alegro que te guste el blog, hago lo que puedo xD
Saludos para ti y para Ale ^^

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *