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 ;)
