Cambio de imagen al pasar el ratón

Hola:
Me gustaría saber como hacer que una imagen cambie por otra al pasar el ratón por encima, ya que lo hago por DHTML pero tarda unos segundos en cargar la imagen nueva, y me gustaría que fuera instantáneo.
Muchas gracias.
1

1 respuesta

Respuesta
1
Saber hacerlo ya sabes, lo que te falta solo es optimizarlo!
Por lo que me cuentas solo te falta por hacer una cosa, precargar las imágenes antes de utilizarlas para que así, no te tarde al hacer el rollover.
Ejemplo simple:
<script language="JavaScript">
// Se declaran 2 imágenes.
var img01_on=new Image();
var img01_off=new Image();
// Se les asocia una ruta con la imagen.
img01_on.src="activada.gif";
img01_off.src="desactivada.gif";
// Creamos la función que cambie de estado.
function ChangeImg(on,nombre){
document.images[nombre].src=on.src;
}
<script>
La declaración de la imágen en el HTML debe ser así:
<img src="desactivada.gif" name="NombreImg">
Y el evento donde llamar a la función este:
<a href="#" onMouseOver="ChangeImg(img01_on,'NombreImg');" onMouseOut="ChangeImg(img01_off,'NombreImg');">
Ahora ya no te tardará. Lo único que debes tener en cuenta para esto, es que la precarga de imágenes debe ser lo primero que haga tu página, así que el primer javascript que lea tu página debe ser el de la precarga de imágenes, ¿ok?

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas