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.
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 Respuesta
Respuesta de manz
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?
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?
