Para conseguir mejores ejectos visuales en nuestras páginas web, nos puede interesar cambiar dinámicamente las imágenes que mostramos. En esta sección, alternaremos entre estas dos:

Hay que asegurarse de que ambas imágenes tienen el mismo tamaño, porque de lo contrario, al cambiar de una a otra, la nueva imagen tratará de ajustarse a la zona que tiene asignada, produciendo algún movimento en los elementos de nuestra página. Si aún así, se desea continuar usando imágenes de distinto tamaño, se puede utilizar otra técnica alternativa a esta, que es la de tener cada imagen en una capa, e ir mostrando y ocultando la que nos interese en cada momento.

Pues bien, inicialmente, deberemos mostrar una de las dos en pantalla. Para ello, tendremos un tag que contendrá el interrogante:

	<div ID="divImagen">
	    <IMG NAME="miImagen" SRC="Interrogante.gif">
	</div>

Como se puede ver, he asignado un nombre a la imagen (miImagen). Este nombre lo usaremos para cambiarla posteriormente.

Pre-Carga de Imágenes

Antes de poder cambiar las imágenes, hay que efectuar una carga previa en la caché del navegador. Este es el código necesario para ello:

	nombreImagen = new Image()
	nombreImagen.src = "rutaImagen"

Este código crea un objeto Imagen. A partir de este momento, siempre que queramos cambiar la imagen, ésta ya estará disponible, es decir, no habrá que esperar a que el navegador la descargue, porque ya la habrá descargado y estará en la caché.

En nuestro caso, tenemos dos imágenes, y evidentemente queremos tener ambas en la caché, por tanto, veremos el código necesario en nuestro caso en particular:

	imagenInterrogante = new Image()
	imagenInterrogante.src = "Interrogante.gif"
	imagenDespertador = new Image()
	imagenDespertador.src = "Despertador.gif"

Función PreCarga

Si por cada imagen que queramos tener en la caché, tenemos que escribir estas mismas dos líneas, será una auténtica pesadez cuando tengamos que tratar unas cuantas. Por eso, lo mejor es tener una funció que se encargue de ello.

	function PreCarga (objetoImagen, rutaImagen) 
	{
	    if (document.images)
	    {
		eval (objetoImagen +' = new Image()')
		eval (objetoImagen +'.src = "' + rutaImagen + '"')
	    }
	}

Donde objetoImagen es el nombre del objeto asociado a la imagen y rutaImagen es la dirección física de la imagen.

Es mejor pre-cargar las imágenes mientras la página aún está cargando, en lugar de esperar a que cargue completamente para hacerlo.

Cambiar la Imagen

Una vez que hemos llevado a cabo la carga previa de las imágenes, ya podemos acceder a ellas y cambiarlas. El cambio de imágenes que están dentro de capas, funciona diferente en ambos navegadores. Primero veremos el código genérivo, y luego veremos unas funciones que ya tienen en cuenta el navegador.

Si la imagen no está en una capa, la forma genérica sería:

	document.images["nombreImagen"].src = objetoImagen.src

Donde nombreImagen es el nombre que indicamos en el tag IMG, y objetoImagen es el nombre del objeto en el que hemos hecho la pre-carga.

Si la imagen está en una capa, en el Netscape debemos indicar el tag DIV en el que está la imagen. En nuestro caso, es divImagen:

	if (ns4)
	    document.divImagen.document.images["miImagen"].src = Despertador.src

Por el contrario, en el Internet Explorer, no tenemos que hacer esto, escribimos el mismo código que escribiríamos si la imagen no estuviese en una capa:

	if (ie4)
	    document.images["miImagen"].src = Despertador.src

Ahora que hemos visto cómo se hace, veremos las funciones que podemos usar para cambiar de una imagen a otra:

	function MuestraInterrogante() 
	{
	    if (ns4)
		document.divImagen.document.images["miImagen"].src = Interrogante.src
	    if (ie4) 
		document.images["miImagen"].src = Interrogante.src
	}

	function MuestraDespertador()
	{
	    if (ns4)
		document.divImagen.document.images["miImagen"].src = Despertador.src
	    if (ie4)
		document.images["miImagen"].src = Despertador.src
	}

Ejemplo

Función CambiarImagen

El ejemplo anterior aún se puede mejorar. Como tenemos dos imágenes, lo que hicimos fue crear dos funciones para mostrar cada una de ellas. Si tuviésemos diez imágenes, tendríamos que crear diez funciones, lo que supone un montón de código repetido. En vez de esto, crearemos una función que, ademá de los parámetros de las funciones anteriores, reciba tambié la capa en la que está la imagen. De esta manera, ya siempre podremos llamar a esta nueva función:

	function CambiarImagen (capa,nombreImagen,objetoImagen) 
	{
	    if (document.layers && capa!=null) {
			var evalstr = 'document.' + capa + '.document.images["' + nombreImagen + '"].src = ';
			evalstr += objetoImagen + '.src';
			eval(evalstr);
	    } else {
			document.images[nombreImagen].src = eval(objetoImagen + ".src")
		}
	}

Ahora, podremos sustituir las dos funciones anteriores (MuestraInterrogante y MuestraDespertador) por dos simples llamadas a esta nueva función:

	CambiarImagen ('divImagen','miImagen','Interrogante')
	CambiarImagen ('divImagen','miImagen','Despertador')

Además, podemos utilizar esta función para modificar imágenes que no estén en ninguna capa. Para hacer esto, el primer parámetro (que indica la capa) debe ser nulo:

	CambiarImagen (null,'miImagen','Interrogante')

Ejemplo

Cambio de Imagen con el Ratón

Con este título es posible que no se entienda que es lo que vamos a ver a continuación. Usaremos el ratón como herramienta para cambiar de imagen, ¿cómo? Al pasar el ratón sobre una imagen, ésta cambiará y, cuando deje de apuntar hacia ella, volverá a mostrar la imagen original. Para ello, usaremos la función CambiarImagen que acabamos de ver.

Como se puede ahora suponer, en el código haremos referencia a los eventos de ratón onMouseOver y onMouseOut. En cada uno de ello, haremos una llamada a CambiarImagen, para que muestre en pantalla la imagen oportuna.

Una pregunta que nos puede surgir es: ¿por qué usamos un href si no queremos declarar ningún link? La respuesta es que lo necesitamos porque en el Netscape, no existen los eventos onMouseOver y onMouseOut dentro del tag img, que es donde sería ideal colocarlos, en cambio, el href sí que los tiene, y en ambos navegadores.

Como no queremos ir a ningún lado al pulsar sobre la imagen, como destino del href ponemos JavaScript:void(null). Con esto, el link existe, y se ejecuta un comando javascript que no hace nada.

El código necesario es el siguiente:

	<div ID="divImagen">
	    <a href="javascript:void(null)"
	        onMouseOver="CambiarImagen('divImagen','miImagen','Despertador')"
	        onMouseOut="CambiarImagen('divImagen','miImagen','Interrogante')">
	        <IMG NAME="miImagen" SRC="Interrogante.gif">
	    </a>
	</div>

Ejemplo

- Versión imprimible de este documento
- Enviar por e-mail este documento