|
Master
en Artes Digitales (IUA-UPF) |
Gestión
de
Imágenes
Acceso y modificación de imágenes: el objeto Image y el tag <IMG SRC=""> | Optimización con pre-carga de imágenes | Ejercicios
Acceso y modificación de imágenes: el objeto Image i el tag <IMG SRC="">
El acceso a una imagen como objeto y a sus propiedades desde JS se realiza desde el objeto document, tal y como se vió anteriormente en la jerarquía del browser.
Todas las imágenes de un documento HTML están contenidas en un array de imágenes de document, de forma que se puede acceder a cada una de ellas a través de un índice:
document.images[i]
Nota: Aunque de forma completa se debería referenciar como: windows.document.images[i], usualmente se omite el window por qué el browser ya presupone que se está trabajando sobre el window actual.
No obstante, es mucho más cómodo en general, poder acceder a una imagen por su nombre. Para esto, se debe definir un name en el tag de cada imagen. Por ejemplo, si tenemos:
<img src="imagen.gif" name="miImagen">
entonces podemos acceder al objeto imagen que le corresponde mediante la siguiente sentencia:
document.miImagen
Propiedad src:
Para modificar una imagen en un documento HTML de forma que podamos substituir la imagen original por otra, debemos acceder y modificar la propiedad scr. Esta propiedad es la que contiene el URL de la dirección de cada imagen. La propiedad scr se asocia con la propiedad src del tag img de HTML.
Así, por ejemplo, sea la siguiente imagen definida en HTML:
<img src="imagen1.gif" name="miImagen">
donde el archivo de la imagen (definido en src) es imagen1.gif y el nombre que le damos en JS (en name) es miImagen. Sea también otra imagen, en la misma carpeta que imagen1.gif, llamada imagen2.gif. Podemos substituir la primera por la segunda, accediendo desde JS a la imagen miImagen y cambiando el scr de la forma siguiente:
document.miImagen.src="imagen2.gif"
IMPORTANTE: Las dos imágenes deben tener el mismo tamaño vertical y horizontal en pixels. Esto es debido a que el browser reserva un espacio para las imágenes y si no coinciden al substituirse puede generar un error en el browser.
De esta forma tan simple se puede generar un cambio de imágenes.
|
Ejemplos de acceso y modificación de imágenes Ejemplo 1 : Utilizando los event handlers (vistos en Eventos del Browser) onMouseOver y onMouseOut, definir un documento HTML con una imagen, la cual realice el efecto conocido como rollover, es decir, que cuando el cursor se ponga encima, la imagen sea substituida por otra, y al mover el cursor fuera de la imagen, la original sea restablecida. |
Ejemplo 1 :
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
function imagenNueva(){
document.miImagen.src = "imagen2.gif"
}
function imagenOriginal(){
document.miImagen.src = "imagen1.gif"
}
//-->
</script>
</head>
<body>
<p><a href="#" onMouseOver="imagenNueva()" onMouseOut="imagenOriginal()">
<img src="imagen1.gif" name="miImagen">
</a>
</p>
</body>
</html>
Optimización con pre-carga de imágenes
Aunque la forma que hemos visto para substituir imágenes desde JS funciona correctamente, debemos tener en cuenta que si la imágen nueva no ha sido cargada por el browser con anterioridad, notaremos un retardo en la aparición de esta nueva imagen. Por esta razón es conveniente realizar una pre-carga de la imagen de modo que el browser ya la tega en su memoria y la pueda presentar al acto en cuanto se le ordene. De esta forma, no notaremos nunca un retardo en los rollovers que diseñemos.
La optimización con pre-carga de imágenes se realiza generando un objeto imagen en JS. Esto se hace mediante la función constructora Image() de la siguiente forma:
miNuevaImagen = new Image()
A partir de este momento, tenemos un nuevo objeto imagen, el cual debemos inicializar con el archivo de la imagen que necesitamos:
miNuevaImagen.src = "imagen2.gif"
y es en este momento en el que el browser carga la imagen. A partir de este momento el browser ya tiene a imagen2.gif accesible.
Para que esto sea realmente efectivo, debe hacerse en el momento de inicializar todo el documento HTML. Por esta razón, normalmente la pre-carga de imágenes se realiza en un bloque <script> en la cabecera, y los comandos de la pre-carga se sitúan en el cuerpo principal del programa y no en una función.
Así pués, para cambiar una imagen definida en el HTML como:
<img src="imagen1.gif" name="miImagen">
desde JS, se haría mediante la siguiente sentencia:
document.miImagen.src = miNuevaImagen.src
donde vemos que ahora, en vez de substituir el src de la imagen por el URL de la nueva, lo substituimos por el src de miNuevaImagen.
|
Ejemplos de Optimización con pre-carga de imágenes Ejemplo 1 : Modificar el Ejemplo 1 de la sección anterior para que se realice la pre-carga.
|
Ejemplo 1 :
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
// Pre-carga de las imágenes
miImagenOriginal = new Image()
miImagenOriginal.src = "imagen1.gif"
miNuevaImagen = new Image()
miNuevaImagen.src = "imagen2.gif"
function imagenNueva(){
document.miImagen.src = miNuevaImagen.src
}
function imagenOriginal(){
document.miImagen.src = miImagenOriginal.src
}
//-->
</script>
</head>
<body>
<p><a href="#" onMouseOver="imagenNueva()" onMouseOut="imagenOriginal()">
<img src="imagen1.gif" name="miImagen">
</a>
</p>
</body>
</html>
Ejemplos de Gestión de Imágenes
|
Ejemplo 1: Modificar el ejemplo anterior de forma que se pre-carguen 5 imágenes en un array propio. Hacer que cada vez que se sitúe el cursor sobre la imagen original, se substituya por una imagen distinta del array, de forma consecutiva. Cada vez que el cursor sea movido fuera de la imagen, se deberá restablecer la imagen original. Ejemplo 2: Diseñar un documento con dos imágenes, una al lado de la otra. La idea es definir unas funciones y unas capturas de eventos, de forma que se genere un efecto de ping pong; es decir, que cuando el usuario ponga el cursor sobre cualquier imagen, las dos imágenes se intercambien. |
Ejemplo 1:
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
// Pre-carga de las imágenes
miImagenOriginal = new Image()
miImagenOriginal.src = "imagen1.gif"
misImagenes = new Array()
misImagenes[0] = new Image()
misImagenes[0].src = "imagen2.gif"
misImagenes[1] = new Image()
misImagenes[1].src = "imagen3.gif"
misImagenes[2] = new Image()
misImagenes[2].src = "imagen4.gif"
misImagenes[3] = new Image()
misImagenes[3].src = "imagen5.gif"
misImagenes[4] = new Image()
misImagenes[4].src = "imagen6.gif"
// Índice para el array de imágenes
imActual = 0
function imagenNueva(){
document.miImagen.src = misImagenes[imActual].src
imActual++
if(imActual == 5){
imActual = 0
}
}
function imagenOriginal(){
document.miImagen.src = miImagenOriginal.src
}
//-->
</script>
</head>
<body>
<p><a href="#" onMouseOver="imagenNueva()" onMouseOut="imagenOriginal()">
<img src="imagen1.gif" name="miImagen">
</a>
</p>
</body>
</html>
Ejemplo 2:
<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
// Pre-carga de las imágenes
imagenTemp = new Image()
function cambiaImagenes(){
imagenTemp.src = document.miImagen1.src
document.miImagen1.src = document.miImagen2.src
document.miImagen2.src = imagenTemp.src
}
//-->
</script>
</head>
<body>
<p><a href="#" onMouseOver="cambiaImagenes()"><img src="imagen1.gif" name="miImagen1"></a>
<a href="#" onMouseOver="cambiaImagenes()"><img src="imagen2.gif" name="miImagen2"></a>
</p>
</body>
</html>