Precargar imágenes

Las siguientes órdenes de JavaScript 1.2 (sólo las reconocerán las versiones 4 de ambos navegadores) nos permitirán cargar diferentes imágenes. Eso hará que estén en el caché, apareciendo más rápido cuando luego las llamemos.

Para ello usaremos el siguiente código:

<script language="JavaScript">

<!--
if (document.images){
	foto1 = new Image();
	foto1.src = "nombreimagen.gif";
	foto2 = new Image();
	foto2.src = "nombreimagen.gif";
}

//-->

</script>

Habría que escribir tantos pares de líneas como imágenes queramos cargar. Cuando son muchas las imágenes a precargar será más fácil hacer lo siguiente:

<script language="JavaScript">

<!--
function precargar(imagen,origen) {
	eval(imagen+' = new Image()')
	eval(imagen+'.src = "'+origen+'"')
}

//-->

</script>

En donde "imagen" es el nombre del objeto asociado con la imagen, y "origen" la URL de la imagen.

Para usarla usaremos el siguiente código. por ejemplo: precargar ('imagen1','imagen1.gif') precargar ('imagen2','imagen2.gif')

Imágenes (o botones gráficos) animados

Una vez que hemos precargado algunas imágenes uno de los efectos más usados es el de hacer que al pasar por una imagen (con forma de botón) se ilumine para indicarnos que estamos sobre ella.

Los pasos a seguir serían:

1. Grabar 2 versiones de cada imagen: una con otra luminosidad o colores que la otra.
2. Siguiendo lo aprendido en la sección anterior precargarlas.
3. Dentro de la directiva de las imágenes usaremos un nuevo parámetro name y le daremos un nombre distinto a cada una.
4. Haremos un enlace en las imágenes y usaremos los eventos de Javascript onMouseOver y onMouseOut dándoles el valor "nombre.src=imagen.src", en donde nombre es el que hayamos asignado con el parámetro name a esa imagen, e imagen es el nombre que hayamos dado a la variable de la imagen que queramos que se vea al precargarla.

   Un ejemplo sería:

   <script language=JavaScript>
   <!--
   imagen1=new Image
   imagen1.src="jsim1.gif"
   imagen2=new Image
   imagen2.src="jsim2.gif"
   // -->
   </script>
   
   <P><a href="http://www.pangea.org" onmouseover=op1.src=imagen2.src
   onmouseout=op1.src=imagen1.src><img src="jsim1.gif" border=0 width=30
   name=op1></a> <FONT FACE="ARIAL"
   SIZE=4><B>Pangea</B>
   
   <P><a href="http://www.pangea.org/pacoc"
   onmouseover=op2.src=imagen2.src
   onmouseout=op2.src=imagen1.src><img src="jsim1.gif" border=0 width=30
   name=op2></a> <FONT FACE="ARIAL" SIZE=4><B>Página de
   Paco</B>
   

   Ahora puedes verlo funcionando.

   Como ves es sencillo, pero hay un problema, en el Explorer 3 esto no funcionará, pero lo que es peor, dará un mensaje de error. Para evitarlo, habrá que definir los nombres como números o bien definir que para ese navegador esos nombres sea null.

   Aquí tenéis un ejemplo del primer caso y otro ejemplo del segundo.