Manual Tratamiento Imagenes Javascript

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Tratamiento de imágenes en
Javascript
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Luciano Moreno José Alberto Torres Arroyo
Consultor, diseñador y desarrollador Ldo en Publicidad y RR.PP
web en ParaRedeBJS. Especialista en (6 capítulos)
usabillidad y diseño centrado en el
usuario.
(8 capítulos)
Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 1

© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
Introducción al tratamiento de imágenes en Javascript

Veamos cómo podemos acceder mediante JavaScript a las propiedades de las
imágenes, qué eventos soportan y cómo podemos con ésto construir una página dinámica.
Aprenderemos a crear rollovers, esos efectos tan solicitados por los diseñadores para incluirlos
en sus páginas, a modificar propiedades de una imagen "en tiempo real" y, sobre todo,
ampliaremos nuestros conocimientos del lenguaje JavaScript, estudiando la forma
que este tiene de acceder a objetos y a sus propiedades y métodos.
El tema de la imágenes y JavaScript puede ser muy escueto o muy extenso. Si nos ceñimos a
las propiedades esenciales del objeto Image a las que podemos acceder con este lenguaje, el
manual resultaría muy corto, pero si nos adentramos en explicaciones de los múltiples script
que se pueden construir basándose en estos elementos, el manual resultaría un libro.
Vamos pues a buscar un término medio, limitándonos a comentar las propiedades, métodos y
eventos propios, y ampliaremos un poco el tema viendo un par de aplicaciones prácticas.
Artículo por Luciano Moreno
El objeto Image - La matriz images

El lenguaje JavaScript posee un objeto propio asociado a cada una de las imágenes de un
documento HTML, el objeto Image. Además, también posee un array particular, el array
images, que contiene todas las imágenes presentes en la página.
Dentro de la jerarquía propia de este lenguaje, tanto el objeto Image como la matriz images se
encuentran incluidos dentro del objeto document, que a su vez se encuentra incluido en al
objeto principal window.
Por lo tanto, al ser estos objetos elementos propios del lenguaje, podemos referirnos a ellos y
acceder a sus propiedades de forma directa, sin tener que recurrir a capas ni otros elementos
externos. Así, podemos acceder directamente a una propiedad cualquiera de una imagen del
documento de dos formas diferentes:
1) Mediante el objeto Image, siendo la sintaxis general en este caso la siguiente:
document.nombre_imagen.nombre_propiedad
donde nombre_imagen es el nombre asignado a la imagen mediante su atributo NAME (es
condición indispensable para usar este método el haber asignado a la imagen un nombre
identificador único mediante el atributo NAME). nombre_propiedad define la propiedad a la que
queremos acceder.
2) Mediante la matriz images[]. Esta matriz contiene todas las imágenes del documento,
empezando su índice interno por 0, como en todos los arrays de JavaScript. La sintaxis general
es del tipo:
document.images[indice].nombre_propiedad
La equivalencia entre indice y la imagen que le corresponde se establece de forma secuencial,
de tal forma que images[0] representará a la primera imagen insertada en el BODY de la
página, images[1] a la segunda, y así sucesívamente, salvo que se haga una declaración
explícita al respecto.

El array images posee la propiedad length, que almacena el número de imágenes presentes en
el documento. Para obtener éste, basta con escribir:
document.images.length.
Ejemplos:
• Acceso a la propiedad WIDTH de la imagen bandera:
document.images.bandera.width
o bien,
document.bandera.width
• Acceso a la propiedad SRC de la imagen bandera:
document.images[1].src
Como ejemplo práctico, vamos a mostrar en pantalla la anchura de la imagen siguiente:
que hemos introducido en la página mediante:

<img src="images/logo.gif" name="logotipo" width="249" height="28" border="0">
y para ello escribimos:
<form>
<input type="button"value=
"dimeanchura"onClick="alert('anchura='+document.logotipo.width)">
</form>
que podemos ver en acción pulsando el botón creado:
dime anchura
De esta forma podemos acceder y/o cambiar cada una de las propiedades de una imagen. Por
ejemplo, si queremos cambiar la anchura de la imagen anterior basta con escribir:
document.logotipo.width="100"
que podéis comprobar pulsando el siguiente botón:
cambia anchura
Nota: el atributo width es de sólo lectura para Nestcape 4x, por lo que podemos leer su valor,
pero no modificarlo. En cambio, sí podemos hacer esto en Internet Explorer y en Nestcape 6x.
Podéis ver más sobre las propiedades o atributos de una imagen en el manual de imágenes en
HTML, de HTML Web, pero vamos a ver un resumen de ellas en el siguiente capítulo.
Propiedades del objeto Image

El objeto Image posee una serie de propiedades, a las que podemos acceder mediante

JavaScript, permitiendo este lenguaje leer estas propiedades e incluso cambiar muchas de
ellas. La forma de acceder a todas ellas es:
document.nombre_imagen.propiedad
Las principales propiedades del objeto Image son:
• name, que referencia el nombre identificador único de la imagen asociada al objeto. La
forma de acceder a esta propiedad es:
document.images[indice].name
Podemos por ejemplo aprovechar el array images para obtener el name de todas las
imágenes de nuestra página:
<script language="JavaScript" type="text/javascript">

var nombres = "";
for (i=0;i<document.images.length;i++)
{
nombres= + document.images[i].name + "/n";
}
</script>
<input type="button" value="dame names"

onClick="alert(nombres);">
El código JavaScript anterior debe situarse al final de la página, antes de la etiqueta </
BODY>, para que las imágenes estén situadas antes que él, con objeto de que sepa las
imágenes que hay en la página. Si lo establecemos tal como está dentro de la cabecera,
al no haberse cargado todavía las imágenes, obtendremos la variable nombres como
una cadena vacía. Para solucionar esto, podemos declarar antes de la variable las
imágenes de la página, mediante el constructor de objetos Image, que veremos en el
capítulo siguiente.
Como resultado de esta acción, sólo aparecerán aquellas imágenes a las que hemos
nombrado por medio del atributo name.
También observarás, si pulsas el botón anterior, que en la ventana que aparece quedan
muchos huecos vacíos; éstos son debidos a todas las imágenes de la página por encima
del código a las que no hemos asignado la propiedad name.
• src, que almacena la ruta de la imagen asociada al objeto. Así, si queremos asignar la
ruta de una imagen a una variable, para poder por ejemplo presentar en pantalla esta
ruta, deberemos escribir:
var ruta = document.nombre_imagen.src;
y luego podemos usar esta variable desde un botón de formulario, por ejemplo:
<img name="dinosaurio" src="images/avatar.gif" width="60" height="60" border="0">
<script language= "JavaScript" type="text/javascript">

var ruta = document.dinosaurio.src;
</script>
<input type="button" value="dame ruta"

onClick="alert(ruta);">
Esta propiedad es fundamentalmente usada para construir rollovers, en los que
cambiamos dinámicamente su valor. Para ello, hay que establecerlo siempre entre
comillas, dobles o simples, ya que src trata la ruta como una cadena de texto (variable
de tipo string).
• width / height, que representan la anchura y la altura de la imagen asociada al
objeto, y que podemos leer (en los 3 navegadores comunes) y cambiar (sólo en
Explorer y Nestcape 6x) de forma dinámica. Ejemplo:
<input type="button" value= "dame altura"
onClick="alert(document.dinosaurio.height)">
• border, que se refiere al atributo border de la imagen asociada al objeto. Para acceder
a esta propiedad deberemos escribir:
document.images[indice].border o document.nombre_imagen.border
Como ejemplo, vamos a cambiar dinámicamente el borde de la imagen inferior:
<input type="button" value="cambia borde" onClick="document.icono.border=10;">
Nota: esto sólo funcionará en Internet Explorer y en Nestcape 6x; para las versiones 4x
de Nestcape esta propiedad es de sólo lectura, por lo que podemos obtener su valor,
pero no cambiarlo.
• hspace / vspace, que definen el espacio horizontal o vertical de una imagen flotante
respecto al texto que la rodea. El acceso a esta propiedad se logra mediante:
document.nombre_imagen.hspace
• lowsrc, que fija la ruta de una imagen accesoria, generalmente una versión de menos
peso en Ks de la imagen principal, que se debe cargar en pantalla mientras se recibe
ésta. Su sintaxis es:
document.nombre_imagen.lowsrc
• prototype: propiedad muy importante desde el punto de vista del programador web,
ya que permite añadir propiedades y métodos adicionales a un objeto Image, es decir,
permite ampliar lo que es el objeto en sí, aumentando sus propiedades por defecto. No
vamos a entrar en detalles sobre esta propiedad, común a muchos de los objetos
propios de JavaScript, ya que para su uso hace falta un conocimiento profundo de este
lenguaje. Pero si decir que sirve, por ejemplo, para asignar una nueva propiedad, que
vamos a llamar orden, de tipo numérico, en la que podemos guardar un orden de
presentación en una ventana flotante, y mediante código permitir al usuario que
seleccione una serie de imágenes de las contenidas en nuestra página. Luego, mediante
esta nueva propiedad orden podemos presentarlas ordenadas en la pantalla flotante (es
sólo un ejemplo). Para más información al respecto, consultar un buen manual de
JavaScript avanzado.
• complete: propiedad del objeto Image de tipo booleano, cierta cuando la imagen se ha
acabado de cargar en memoria, y falsa en caso contrario. Sólo es soportada por
Nestcape Navigator, por lo que no se debe usar, en vistas a la compatibilidad.

Con esto acabamos las propiedades principales del objeto Image. Sólo añadir que las
propiedades border, name y vspace no son accesibles para objetos creados mediante el
constructor Image( ). Este método constructor de nuevos objetos Image lo vamos a
estudiar a continuación, junto con los principales eventos soportados por una imagen.
Eventos para imágenes

El objeto Image admite sólamente 3 eventos comunes a los 3 navegadores: Internet
Explorer, Nestcape Navigator 4x y Nestcape Navigator 6x. Estos son:
• onAbort, que se activa cuando se aborta la carga de una imagen en pantalla, por
ejemplo porque el usuario ha pulsado la opción "detener" (stop) en la barra superior de
iconos del navegador. Ejemplo de sintaxis:
<img name="imagen1"src="images/logo.gif"........onAbort="alert('ha cancelado la
carga de la imagen')">
• onError, que se dispara cuando por algún motivo externo no se ha podido realizar la
carga de la imagen en pantalla, por ejemplo porque la ruta de la misma esté mal
especificada. Ejemplo de sintaxis:
<img name="imagen1"src="images/logo.gif"........onError="alert('la imagen del
logotipo no se ha podido cargar')">
• onLoad, que se activa cuando se ha acabado de cargar la imagen y se presenta en
pantalla. Ejemplo de sintaxis:
<img name="imagen1"src="images/logo.gif"........onLoad="alert('ya se ha cargado la
imagen del logotipo')">
Pero además de estos eventos comunes, las imágenes soportan otra serie de eventos que, si
bien no son soportados por Nestcape 4x, sí lo son por Internet Explorer y por Nestcape 6x. Por
este motivo, sólo es conveniente su uso cuando van a ejecutar una acción que no sea
fundamental ni para la presentación ni para la ejecución de código de la página. Esperemos a
que pronto se estandarice el uso de Nestcape 6x y se deje a un lado las versiones 4x, y
entonces podremos aplicar estos eventos con compatibilidad total. Estos eventos adicionales
son:
• onClick, que se activa cuando se hace click con el puntero del ratón sobre la imagen.
Ejemplo de sintaxis:
<img name="imagen1"src="images/logo.gif" onClick="alert('gracias por pulsarme')">
• onmouseOver, que se activa cuando se el puntero del ratón pasa sobre la imagen.
Ejemplo de sintaxis:
<img name= "imagen1"src="images/logo.gif" onmouseOver="alert('gracias por pasar sobre
mí)">

• onmouseOut, que se activa cuando el puntero del ratón, trás pasar sobre la imagen,
se va de ella. Ejemplo de sintaxis:
<img name= "imagen1"src="images/logo.gif" onmouseOut="alert('adios, amigo')">
Nota cómo he situado la imagen anterior en el lateral izquierdo. Si la centro, como

están las anteriores, y coincide que el usuario ha desplazado la página con la barra
lateral de scroll de tal forma que la imagen queda centrada también verticalmente, se
produce un curioso y molesto efecto. Al irse el cursor de la imagen se lanza la pantalla
de alerta, con lo que tienes que pulsar el botón aceptar de la misma para que se cierre.
Pero al hacer esto, cuando se cierra, el cursor se encuentra de nuevo sobre la imagen,
con lo que si lo quitas de encima se repite el proceso, y así sucesívamente. La única
solución es cerrar la ventana de alerta pulsando la cruz de la esquina superior derecha
de la misma, pero si el usuario no cáe en ello, se verá obligado a cerrar la ventana del
navegador mediante el Administrador de Tareas. ¡Cuidado con estos ciclos indeseados!.
También podríamos aplicar otros eventos de este tipo, como onmouseUp, ondblClick, etc., pero
no suelen ser útiles, causando normalmente más problemas que ventajas.
Compatibilizando eventos
Hemos visto que las imágenes sólo admiten como eventos estándares onLoad, onError y
onAbort, pero la mayoría de las veces nosotros necesitamos elementos que soporten todo tipo
de eventos, como onClick, onmouseOver, etc., y en todo tipo de navegadores.
Podemos, con un poco de imaginación, utilizar otros elementos de JavaScript para conseguir
esto. Así, sabemos que el objeto Link sí admite todo tipo de eventos, por lo que podemos
usarlo como herramienta auxiliar para dotar a las imágenes de las funcionalidades que
necesitamos.
La idea es muy simple: basta situar la imagen que deseamos que soporte los eventos dentro
de un enlace simple de HTML, es decir, situando la etiqueta <IMAGE> dentro de la pareja de
etiquetas < A HREF.....>...</A>, y entonces establecer el evento necesario NO en la imagen,
sino en el enlace. Como ejemplo práctico vamos a introducir una imagen que soporte de forma
general el evento onClick:
<a href="#" onClick="alert('que evento más bonito');return false;"><img
src="images/avatar.gif" width="60" height="60" border="0"></a>
Nota lo siguiente:
1) si sitúas el cursor sobre la imagen verás que éste se transforma en la mano típica de los
enlaces. Lógico, ya que hemos transformado la imagen en uno de ellos. Si deseas eliminar este
efecto, basta con asignar al enlace un estilo para el cursor, dejando este como default:

<a href="#" ................ style="cursor:default;"><img src=............................></a>

pero ten en cuenta que esto sólo será válido para Internet Explorer y para Nestcape 6x. Las
versiones 4x de este último navegador no soportan el estilo en cursores, por lo que en ellos
siempre aparacerá la mano.
2) Ojo con el atributo BORDER. Debes ponerlo siempre, igualándolo a cero, ya que si no se
verá un recuadro azul alrededor de la imagen, el típico de todos los enlaces.
3) Hemos escrito a href="#" porque no vamos a llamar a ninguna página, y return false para
anular el efecto del enlace en sí, ya que sólo queremos que se ejecute el evento, no la llamada
del enlace.
Por lo demás este truco es totálmente compatible, y podemos desde el evento del enlace
ejecutar código JavaScript o llamar a una función previamente definida.
El constructor de objetos Image

El objeto Image posee en JavaScript un método constructor, de tal forma que podemos
declarar con él un objeto de este tipo al principio de nuestra página, dentro de la cabecera de
la misma.
La sintaxis para usar este constructor es la siguiente:
nombre_imagen = new Image (width,height);
donde los parámetros width y height corresponden a los atributos análogos de la imagen
definida. Si no especificamos estos parámetros, con la declaración del constructor tendremos
ya creado el nuevo objeto Image, pero el navegador no sabrá el tamaño que va a tener la
imagen asociada. No obstante, no suele ser necesario establecer estos parámetros, por lo
siguiente.
El navegador no sabe tampoco con la declaración anterior qué imagen en concreto es la
asociada al objeto, por lo que no podrá cargarla en memoria, y si nos referimos a ella para
hacer que aparezca dinámicamente se producirá un error. Para evitar esto, la declaración del
objeto se debe acompañar de otra en la que establecemos qué imagen en concreto es la
asociada al objeto, y esto se hace con la escritura:
nombre_imagen = new Image ( );
nombre_imagen.src = "ruta_imagen";
Y con esto el navegador ya sabe que hemos declarado un nuevo objeto imagen y sabe también
qué imagen en concreto es la asociada al objeto, por lo que conoce su peso en Ks, pudiendo
cargarla en memoria y tenerla así disponible para poder usarla cuando queramos. Si además
hemos declarado su tamaño mediante los parámetros width y height, ya tiene todos los datos
que definen al nuevo objeto. Ejemplo de declaración completa:
logotipo = new Image(249,28);
logotipo.src="images/logo.gif";
La declaración de los objetos Image que figurarán en nuestra página es muy importante, sobre
todo en el caso de que en ella vayamos a cambiar dinámicamente la ruta de alguna de las
imágenes inicialmente presentes en el BODY. Este es el caso de los famosos rollovers en los

que, si no hemos declarado en la cabecera el objeto Image correspondiente a la nueva imagen

a pintar en pantalla con su ruta correcta, el navegador no sabrá a qué nos referimos, con lo
que nos dará el típico error de JavaScript "document.nombre_imagen no es un objeto".
Declarar un objeto Image dentro del HEAD de la página, dando la ruta de su imagen asociada,
se conoce también con el nombre de precarga de imagen, ya que efectívamente, éste es el
efecto que se consigue con esta declaración. Vamos a ver en el capítulo siguiente cómo se
estructura una página con precarga y cómo se construyen los rollovers.
Aplicación práctica - Rollover simple

Vamos a ver ahora algunas de las aplicaciones más comunes del lenguaje JavaScript al
tratamiento de imágenes. Sin duda la más conocida de ellas es el efecto conocido como
rollover, en el que al pasar el cursor sobre una o más imágenes de nuestra página, éstas
cambian dinámicamente, apareciendo una nueva imagen. Posteriormente, cuando el cursor se
va de ésta, el sistema vuelve a su estado inicial.
Vamos a empezar con un rollover simple, de una sóla imagen, ya que con él podremos explicar
con claridad las bases teóricas de la construcción de este tipo de efectos.
Tenemos pués una imagen en nuestra pantalla, y lo primero que deseamos en que al pasar el
cursor sobre ella pase algo, pero hemos visto que el objeto Image no admite de forma
estándar el evento que necesitamos: onmouseOver. Para solucionar esto hemos visto en el
capítulo anterior que podemos recurrir a situar nuestra imagen dentro de un enlace, ya que
éste sí admite el evento que necesitamos.
Por lo tanto, situamos la imagen, con el atributo border igualado a 0, dentro de un enlace, al
que vamos a dejar el cursor estándar, ya que normalmente los rollover se usan para menús, y
en estos la pulsación debe llevar a una nueva página, por lo que con el cursor en forma de
mano el usuario sabrá que eso es un enlace. No obstante, en el ejemplo que vamos a construir
no vamos a apuntar a ninguna página en concreto, para no perder la atención, así que vamos
a llamar a la página # (que no es ninguna), y en el evento onClick añadiremos return false.
¿Qué ponemos dentro del evento onmouseOver del enlace?. Inicialmente, vamos a acceder
desde él a la propiedad src de la imagen que contiene, y vamos a cambiar esta ruta, de forma
que la imagen, aún llamándose igual, apunte a otro fichero gráfico, con lo que el cambio será
efectivo. Para ello necesitamos haber asignado un name a la imagen. El código que
necesitamos es pues:
<a href= "#" onmouseOver="document.ejemplo.src='images/avatar2.gif';" onClick="return
false;">
<img name="ejemplo" src="images/avatar.gif" width="60" height="60" border="0">
</a>
que nos da:
Bien, ya nos cambia la imagen, pero....¿cómo hacemos que se vuelva a la original cuando el

cursor deja la nueva?. Muy facil, usando el evento onmouseOut de forma análoga a como
hemos usado onmouseOver:
<a href= "#" onmouseOver="document.ejemplo.src='images/avatar2.gif';" onClick= "return
false;" onmouseOut="document.ejemplo.src='images/avatar.gif';">
<img name="ejemplo" src="images/avatar.gif" width="60" height="60" border="0">
</a>
¡Qué bonito!. Pero hay un problema, y gordo. Cuando se activa el evento onmouseOver
nuestro código llama a la imagen activa avatar2.gif, pero esta imagen no está cargada en la
memoria caché del navegador, por lo que éste necesita hacer una nueva petición HTTP al
servidor para pedírsela, cargarla luego en memoria y por último mostrarla en pantalla.
Resultado de todo esto: hay un periodo de tiempo en el que la imagen inicial desaparece y se
muestra en su lugar un recuadro vacío. ¿Cómo podemos solucionar esto?.
Fácil, amigo. Basta con precargar la imagen activa antes de que se ejecute el código del
evento, ya que así el navegador la tendrá disponible en su caché y el proceso de cambio de
imágenes será instantáneo. Para precargar una imagen debemos usar el método constructor
de objetos Image en la cabecera de nuestra página, y en él debemos especificar tanto el
tamaño de la imagen que deseamos cargar como la ruta de la misma. Nuestro código queda:
cript language="JavaScript" type="text/javascript">

magenOn = new Image(60,60);
magenOn.src = "images/avatar2.gif";
script>
head>
ody>
align= center>
href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='images/avatar2.gif';"
mouseout="document.ejemplo.src='images/avatar.gif';">
MG name="ejemplo" src="images/avatar.gif" alt = "ejemplo de rolloversimple"width="60" height="60" border= "0">
A>
P>
body>
y su resultado es el que sigue:
También podemos crear un rollover compuesto en el que, además del efecto que ya hemos
obtenido, se presente una nueva imagen si el usuario hace click sobre la activada. Para ello
sólo es necesario precargar otra imagen y acceder de nuevo a la propiedad src, esta vez
mediante el evento onClick.
Pero para ello, esta vez vamos a definir unas cuantas funciones, una para cada evento, en la
cabecera de la página, y vamos a llamarlas con los eventos. Examina el siguiente código:

<script language= "JavaScript"type= "text/javascript">
var estado = false;
imagenInicial = new Image(60,60);

imagenOn = new Image(60,60);
imagenClick = new Image(60,60);
imagenInicial.src = "images/avatar.gif";
imagenOn.src = "images/avatar2.gif";
imagenClick.src = "images/avatar3.gif";
function over( )
{
if(estado = = false)
{
document.ejemplo.src = imagenOn.src;
}
else
{
return;
}
}
function out( )
{
if(estado = = false)
{
document.ejemplo.src = imagenInicial.src;
}
else
{
return;
}
}
function pulsar( )
{
document.ejemplo.src = imagenClick.src;
estado = true;
}
</script>
</head>
<body>
<P align=center>
<A href="#" onmouseout="out();" onmouseover="over();" onclick="pulsar();return false;">
<IMG name="ejemplo" src = "images/avatar.gif" alt= "ejemplode rollover simple" width= "60" height = "60" border
= "0">
</A>
</P>
...

...
</body>
cuyo resultado es el que sigue:
y que podemos explicar un poco:

En el script de la cabecera declaramos los 3 objetos Image que nos van a hacer falta, uno para
la imagen inicial (imagenInicial), otro para la activa (imagenOn) y el tercero para la imagen
que debe aparecer al hacer click (imagenClick), estableciendo sus rutas de acceso, con lo que
dichas imágenes se cargarán en la caché del navegador al empezar a cargar la página.
Seguidamente creamos 3 funciones, una para cambiar la imagen en pantalla en cada uno de
los casos posibles, y luego en el enlace en que está incluida la imagen en el BODY llamamos a
cada función mediante el evento correspondiente.
Si el usuario pincha en la imagen, esta cambiará, pero al salir el cursor de ella volverá a su
estado inicial. Como ahora no nos interesa que ocurra esto, sino que lo que queremos es que
una vez pinchada la imagen ésta permanezca ya fija, lo que hacemos es declarar una variable
contador, de tipo booleano, al principio del script, y lo hacemos fuera de toda función para que
sea de caracter público, es decir, que pueda ser accedida en cualquier momento por cualquier
función de nuestro código.
Por último, en la función pulsar( ), que es la que llamamos mediante el evento onClick,
cambiamos el valor de esta variable contador a true, y establecemos en los códigos de las
funciones over( ) y out( ) que se cambie la imagen sólo en el caso de que contador sea false.
Con esto nos aseguramos que el cambio de imagen al pasar el cursor y al quitarlo sólo se
realice en caso de que antes no se haya hecho click en la imagen.
En caso de que se haya hecho ya click (contador valdrá true), las funciones over( ) y out( )
sólo ejecutarán la orden return, que en realidad no hace nada, sólo detener la ejecución de la
función.
Resulta un poco lioso de explicar con palabras simples, pero si miras el código de arriba
detenidamente, lo entenderás bien.
Bueno, amigos. Esto es todo respecto a la creación de un rollover simple. Si observáis el
código fuente de páginas con este efecto veréis que el código tal vez esté escrito de otra
forma, más "profesional", pero creo que una explicación basada en la aplicación clara y directa
de los eventos y propiedades del objeto Image es el método más claro de entender por qué
ocurren estos cambios en una imagen.
En el siguiente capítulo vamos a avanzar un poco más, estudiando la creación de rollovers
múltiples.
Aplicación práctica - Rollover múltiple

Vamos ahora a crear un rollover múltiple, entendiendo por tal el formado por varias imágenes

que cambian al pasar el cursor sobre ellas, y para hacer algo útil, vamos a aplicar este rollover
a la construcción de un menú.
Indudablemente, podríamos basarnos en lo estudiado en el rollover simple para crear uno
múltiple, pués basta establecer en los eventos de los enlaces una llamada a la propiedad src
de cada imagen, o también crear 2 funciones para cada imagen y llamar a cada una de ellas en
el momento oportuno.
No vamos a hacer esto, ya que repetiríamos código innecesario, pero tampoco vamos a crear
unas funciones basadas en cambiar matrices de imágenes mediante bucles, porque creo que
entonces no se vería claro el porqué de cada función y variable.
Por lo tanto, vamos a crear un código lo más simple y claro posible, tal que se pueda entender
bien su uso, ya que el objeto de este pequeño manual es aprender porqué se hacen las cosas,
no presentar script muy avanzados y bonitos.
Vamos a basarnos en lo aprendido hasta ahora, llamando a una misma función en los dos
eventos, función que va a admitir dos parámetros: el name de la imagen a cambiar y el
nombre del objeto Image cuyo src va a ser el nuevo que asignemos.
Nuestro menú va a estar formado por 3 imágenes, cada una con un enlace, y lógicamente lo
primero que debemos hacer será precargar todas ellas, tanto activas como iniciales. Vamos a
ver primero el código completo necesario para el menú y su efecto, y posteriormente
explicaremos el código someramente:
<html>
<head>
<title>ejemplo de rollover múltiple</title>
<script language="JavaScript" type="text/javascript">
home=new Image(80,20);
homeOn=new Image(80,20);
html=new Image(80,20);
htmlOn=new Image(80,20);
java=new Image(80,20);
javaOn=new Image(80,20);
home.src="images/homeOff.gif";
homeOn.src="images/homeOn.gif";
html.src="images/htmlOff.gif";
htmlOn.src="images/htmlOn.gif";
java.src="images/javaOff.gif";
javaOn.src="images/javaOn.gif";
function cambia(nombre,activa)
{
document.images[nombre].src=activa.src;
}
</script>
</head>
<body>
<P>
<A href="#" onmouseout="cambia('primera',home);" onmouseover="cambia('primera',homeOn);" onclick="return

false;">
<img name="primera" src="images/homeOff.gif" width="80" height="20" border="0" alt="home">
</A>
<P>
<A href="#" onmouseout="cambia('segunda',html);" onmouseover="cambia('segunda',htmlOn);" onclick="return
false;">
<img name="segunda" src="images/htmlOff.gif" width="80" height="20" border="0" alt="home">
</A>
<P>
<A href="#" onmouseout="cambia('tercera',java);" onmouseover="cambia('tercera',javaOn);" onclick="return
false;">
<img name="tercera" src="images/javaOff.gif" width="80" height="20" border="0" alt="home">
</A>
</P>
</body>
</html>
cuyo efecto es el que sigue:
Como hemos dicho antes, lo primero que hacemos es precargar las 6 imágenes que vamos a
usar, asignando cada una de ellas a un objeto Image que creamos con el método constructor
conocido: las 3 iniciales (home, html y java) y las 3 activas (homeOn, htmlOn y javaOn).
Seguídamente creamos nuestra única función, cambia(nombre,activa), que va a admitir como
parámetros nombre, que es el name de la imagen del BODY que va a cambiarse, y activa, que
es nombre del Objeto imagen cuya imagen asociada (mediante su parámetro src) es la que
deseamos que aparezca mediante la función.
Con este planteamiento podemos cambiar las veces que queramos cualquier imagen de la
página; basta para ello decirle a la función qué imagen debe cambiar y por cuál.
Entonces, aprovechamos los enlaces de cada una de las 3 imágenes de nuestro menú para
llamar a la función cambia, pasándole en cada onmouseOver el name de la imagen contenida
en el enlace y el nombre del objeto Image que define la nueva imagen a aparecer, y llamándo
a la función de nuevo en cada evento onmouseOut para volver las cosas a su estado inicial.
En la función hemos escrito document.images[nombre].src, con el parámetro nombre entre
paréntesis porque la imagen es en este caso un elemento de la matriz images, que contiene
todas las imágenes del documento (también se podía haber escrito document [nombre], ya
que document contiene todos los objetos predefinidos del documento, sean imágenes, enlaces
o formularios), y desde el evento hemos pasado este parámetro entre comillas simples porque
como atributo de un objeto hay que hacerlo así (si se la hubiésemos pasado sin comillas nos
daría un error, ya que le estaríamos pasando entonces un objeto, y no un atributo, que es lo
que name es en realidad).
Y desde estos eventos hemos pasado el valor del parámetro activa sin comillas porque en la
escritura de la función tenemos activa.src, es decir, hace referencia a la propiedad src de un
objeto Image.
Como norma general, cuando a una función de JavaScript le pasamos como parámetro un
atributo (name de una imagen o enlace, id de una capa, etc.) deberemos hacerlo siempre

entre comillas, mientras que si le pasamos como parámetro un objeto, hay que hacerlo sin
incluirlo entre ellas.
No creo que sean necesarias más explicaciones, ya que el código es bastante simple. Sólo
decir que muchos autores introducen en el código inicial de la función cambia un condicionante
if(document.images), y que con ello lo que persiguen es que el código siguiente sólo se ejecute
en el caso de que el navegador acepte este objeto de JavaScript. Podemos tranquílamente
pasar de este condicionante, ya que la gran mayoría de los navegadores actuales soportan el
objeto Image de JavaScript.
Conclusiones
Bien, amigos. Hasta aquí este pequeño tutorial sobre tratamiento de imágenes en JavaScript.
En él hemos aprendido cómo para este lenguaje cada imagen del documento es un objeto
propio, con sus métodos y propiedades específicas, y cómo podemos acceder a estas
propiedades, leerlas y cambiarlas dinámicamente.
También hemos estudiado los principales eventos que soportan las imágenes, y cómo podemos
usar enlaces para ampliar el número de eventos compatibles con todos los navegadores más
comunes.
Por último hemos visto la aplicación práctica de todo ello en la construcción de rollovers
simples y múltiples. Desde luego que no son estos las únicas aplicaciones del tratamiento de
imágenes y JavaScript, ni tampoco como aquí las hemos estudiado son la forma común en que
podéis encontrarlos en diferentes páginas web de Internet, en las que se construyen matrices
de imágenes y se accede a las propiedades de éstas mediante bucles. Pero creo que sin duda
hemos visto una forma de aplicarlos que puede resultar clara y educativa.
De todas formas sabed que todos los scripts que encontréis por ahí basados en imágenes usan
en mayor o menos medida lo que hemos estudiado en este manual, aunque también añadan
elementos del lenguaje JavaScript que complementen el código.
Si detectas algún fallo en lo expuesto en estas páginas o conoces algo que permita ampliarlas,
escríbenos. Todo esto lo hacemos con tu ayuda.
Tal vez en un futuro ampliemos este manual con alguna aplicación práctica más. Hasta
entonces, que la fuerza os acompañe.
Más sobre el tratamiento de imágenes en Javascript. La

precarga
Lo que se pretende con el presente artículo es entender realmente el concepto de "Carga de
gráficos en segundo plano", cómo almacena el navegador en memoria las imágenes que se
emplearán en la página y por qué la mayoría de las funciones de precargas que
automáticamente generan programas como ImageReady de Adobe y otros no son realmente

efectivas ni apropiadas en muchos casos. Sugeriremos aquí la más conveniente para según
qué casos.
Nota: Se pretende corregir algunos puntos y profundizar en ciertos aspectos que no se tratan en tánta
profundidad en otro artículo de esta misma web: Introducción al tratamiento de imágenes en Javascript
de Luciano Moreno. Se recomienda leer también dicho artículo para contrastar y porque puede servir de
complemento a éste, ya que se explican aspectos que no se detallan aquí.
Lo que SÍ se explica en este artículo:

• El flujo de carga de una página con gráficos.
• Creación de una verdadera función de precarga con JavaScript.
• Cómo mostrar simultáneamente TODAS las imágenes que se usan en la página.
• El auténtico Roll-Over
• Errores frecuentes y confusiones.
Lo que NO se explica en este artículo:
• Cómo funciona el constructor del objeto Image.
• El funcionamiento de las propiedades src, width, height, etc del objeto.
• Conceptos básicos de programación en JavaScript,HTML o CSS.
Índice de contenidos
(se recomienda leer en orden)
1. El INICIO
2. El PROBLEMA
3. LA EXPLICACION
4. LAS FUNCIONES ESTANDAR DE PRECARGA NO VALEN
5. LA SOLUCIÓN
6. ÚLTIMAS CONSIDERACIONES
Artículo por José Alberto Torres Arroyo
La precarga de imágenes y el problema inicial

El inicio
Personalmente me enfrenté al problema de precarga de imágenes en la web al crear una

página en la que, por diferentes razones,se debían cargar un número considerable de
imágenes estáticas y otras para uso en eventos de Roll-Over. La página además debía aparecer
en una ventana maximizada del navegador (sin barras de scroll,de navegación,de
direcciones,etc) para poder apreciar un fondo de 800x600 píxeles. Para hacer ésto, desde la
primera página que se carga (página A) se declara un un window.open con el atributo
FULLSCREEN=YES que muestra nuestra verdadera ventana principal maximizada (página B).
Para que A no se quedara como página vacía pensé en utilizarla para precargar ahí los gráficos
que B emplearía.
El problema
Al cargarse B a partir de A teóricamente todos sus gráficos debían aparecer al instante en

pantalla, pero ésto no sucedía así. El código básicamente era:

CóDIGO 1
<HTML>

<HEAD>
<TITLE>Cargando...</TITLE>
<SCRIPT TYPE="text/javascript">
function cargaImagen(arg) {
if (document.images) {
document.write("Cargando imagen: " + arg + "...<br>");
rslt = new Image();
rslt.src = '"'+ arg +'"';
document.write("\t cargada con éxito<br>");
return rslt;
}
}
if (document.images) {
imagen1=cargaImagen("imagenes/pedazo1.jpg");
imagen2=cargaImagen("imagenes/pedazo2.png");
document.write("CARGA TERMINADA");
}
<-- Aquí abrimos la ventana maximizada B que es nuestra verdadera página de inicio en la web -->
privenmax=window.open('inicio.html','principal','fullscreen=yes');
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
FIN DE CÓDIGO 1
RESULTADO: Sale 1 ventana maximizada (inicio.html) que carga las imágenes como siempre,
y lo que es más, la primera ventana en la que con document.write se indica qué imágenes se
han ido cargando queda minimizada en la barra de tareas, con lo cual no se ve.
La explicación del fallo de la precarga de imágenes

El error es pensar que el navegador, al encontrarse con una declaración:
imagen= new Image();

imagen.src="RutaDeLaImagen";
detiene el proceso de carga del resto del código de la página hasta que ha precargado esa
imagen en la Caché. Ésto no es así. Al leer el código anterior, el navegador comienza a cargar

en segundo plano las imágenes y SIGUE cargando código HTML. Es decir, la carga de imágenes
con javascript y la carga del resto de código llegan casi a SOLAPARSE en ocasiones, siendo lo
más normal que el navegador llegue a la etiqueta </HTML> sin que una sóla imagen esté en la
Caché, pese haberla precargado antes (es decir, instanciado de objetos de la clase Image).
A su vez, al llegar a etiquetas <IMG> también comienza a precargar dichas imágenes en

segundo plano,pero COLOCÁNDOLAS A LA COLA (o Queue) de las precargas, es decir, tienen
menos prioridad que las declaradas con JavaScript (para que ésto sea así es FUNDAMENTAL
precargar las imágenes que nos interesen con JavaScript antes de la etiqueta </HEAD>). Esta
prioridad es lo que en programación se conoce como concepto de COLA (F.I.F.O = First In First
Out, lo que en nuestro caso se traduce en: la primera imagen que está en la cola para su
precarga es la primera que se carga); es, por oposición, lo contrario al concepto de PILA
(Stack) que es L.I.F.O (Last In First Out, el último elemento en entrar es el primero en salir).
Así, sobre la precarga de imágenes en Cache, la página con documentación de desarrollo de

webs de Netscape Devedge Netscape aclara que:
The resulting image will be obtained from cache, rather than loaded over the network,
assuming that sufficient time has elapsed to load and decode the entire image. You can
use this technique to create smooth animations, or you could display one of several
images based on form input.
Una vez leída la etiqueta </HTML> tanto la precarga de imágenes ya declaradas con
JavaScript, como las imágenes estáticas que se encuentren en etiquetas HTML siguen su
proceso de carga normal hasta completarse.
Dicho ésto, cabe decir que NO debemos pues confundir el evento onLoad que frecuentemente
se usa en <BODY> con que una página web esté cargada en su totalidad. Al contrario, con
dicho evento sólo detectaremos que el navegador ha leído la última etiqueta de la página, pero
imágenes,sonidos, u otros objetos incrustados en la página proseguirán independientemente
su carga.
Las funciones estandar de precarga no valen

Lo visto en CÓDIGO 1 es el código que ciertas aplicaciones generadoras de HTML ofrecen al
usuario para crear funciones de precarga de imágenes. Si hemos entendido el punto anterior
se entiende que si lo que buscamos es que una página muestre SIMULTANEAMENTE todas las
imágenes estáticas que posee y tenga disponibles desde el primer momento todas las
imágenes dinámicas de efectos gráficos como Roll-Overs u otros, no es suficiente con el código
que ya hemos visto; se requiere ése y otro código extra.
En cuanto a por qué se sigue usando el método éstandar de precarga que proporcionan ciertos
programas o que diseñan por su cuenta los propios programadores web,las razones son las
siguientes:
• No se busca mostrar todas las imágenes de una página a la vez,o el "peso" de esas
imágenes es tan poco que apenas hay desfase entre la carga de imágenes y del código

HTML en sí, con lo cual dicho desfase apenas se nota. Habrá pocas imágenes y serán
estáticas.
• Compatibilidad: la solución al problema de la precarga será el uso de la propiedad
complete de Image que veremos más adelante. Esta propiedad está disponible en
Netscape Navigator desde la v.3, mientras que en Internet Explorer es desde la v.4 Así,
si queríamos abarcar navegadores 3.0 y usar complete dejaríamos al margen a Internet
Explorer v.3
• El desconocimiento de una mejor alternativa. Generalmente se cae en la rutina abusiva
del Copiar-Pegar código de otras páginas y, además cada vez existen más programas de
fácil manejo que con entornos gráficos crean páginas web sin que el usuario que no
sabe programación sepa el verdadero significado del código que insertan dichos
programas.
Función de precarga de imágenes en Javascipt que sí

funciona
Como anteriormente se ha mencionado, será el uso de la propiedad complete que detecta
cuándo una imagen se ha cargado empleando JavaScript (sería similar, aunque no igual
exactamente, a emplear un evento onLoad en cada etiqueta <IMG> que tuviésemos). Dicha
propiedad se encuentra disponible desde Netscape Navigator v.3, pero también (y al contrario
de lo que dice Luciano Moreno en su artículo) se encuentra accesible en Internet Explorer v.4,
como puede verificarse en la página web oficial de Microsoft al respecto.
A continuación mostraremos el código que nos va a permitir que tres imágenes se carguen
primero y luego aparezcan simultáneamente en pantalla. En el ejemplo original se usaron
archivos gráficos .bmp y de un alto peso (unos 620KB cada uno), pues la página se probó
descargándola de la red con una conexión de Cable; con imágenes de pocos KB no daría
tiempo a comprobar el efecto, pues su aparición en pantalla tanto con precarga como sin ella
sería prácticamente inmediata. Las imágenes de este artículo son las mismas que las
originales, pero en formato jpg pues se trata de visualizar simplemente el ejemplo.Tenemos 3
imágenes distintas que aparecerán a la vez: foto1.bmp foto2.bmp foto3.bmp La primera estára
compuesta por un Roll-Over con estados onMouseOver y onMouseOut. La imagen del centro
sería la misma que aparece en la primera con el cursor sobre ella (más tarde explicaremos el
por qué). La tercera es una imagen distinta,que no se usa ni en el Roll-Over ni en la central
(ver fotos).
El código que precargará y mostrará todas las imágenes simultáneamente es el que sigue:
CÓDIGO 2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<HTML>
<HEAD>

a=new Image(1, 1);

a.src="transparente.gif";
x=new Image(150,150); //la x no tiene por q llamarse roll, que es el NAME de <img>
x.src="foto1.bmp";
y=new Image(150,150);
y.src="foto2.bmp";
z=new Image(1, 1);

z.src="foto3.bmp";
flagx=false, flagy=false, flagz=false;
function empieza() {
if (x.complete) flagx=true;
if (y.complete) flagy=true;
if (z.complete) flagz=true;
window.status="Foto1 Cargada: " + x.complete + " Foto2 Cargada: " + y.complete + " Foto3 Cargada: " +
z.complete;
if (flagx && flagy && flagz) {

roll.src="foto1.bmp";
foto2.src="foto2.bmp";
foto3.src="foto3.bmp";
clearTimeout(tiempo);
}
else tiempo=setTimeout('empieza()',1000);
}
</script>
</head>
<BODY onLoad="tiempo=setTimeout('empieza()',1000);">
<H1 STYLE="white-space: pre">Aquí comienza el cuerpo del documento.
Foto 2 y Foto 3 ya se estan precargando
</H1>
<IMG NAME="roll" WIDTH=150 HEIGHT=150 onMouseOver="roll.src='foto2.bmp';"

onMouseOut="roll.src='foto1.bmp';" ALT="PRECARGA FOTO 1">
<IMG NAME="foto2" WIDTH=150 HEIGHT=150 ALT="PRECARGA FOTO 2">
<IMG NAME="foto3" WIDTH=150 HEIGHT=150 ALT="PRECARGA FOTO 3">
<BR>
<H1 STYLE="white-space: pre">Aquí terminó la carga del código HTML.
La etiqueta <\HTML> viene justo debajo<H2>
</BODY>
</HTML>
FIN DE CÓDIGO 2
El funcionamiento de este código JavaScript es muy simple:

1. Comienza el proceso de precarga de imágenes
2. Se declara la función que comprobará que están cargadas TODAS
3. Se insertan las etiquetas HTML normales que empleemos en BODY.No asignamos el
atributo SRC a IMG pues no deben mostrar nada hasta que JavaScript se lo indique. Tan
sólo "reservamos" el ANCHO y ALTO que tendrán para que todo salga colocado en

pantalla.
4. Al llegar a <HTML> se invoca a la función empieza() que mediante unas variables flags
estima qué imagen se ha cargado ya.
5. Cada 1 segundo con setTimeout se comprueba cómo marcha la carga de imágenes y se
refleja a modo orientativo en la Barra de Estado del Navegador.
6. Cuando las 3 flags toman el valor TRUE se asigna una imagen a cada etiqueta <IMG>
que permanecía sin contenido,a través de su atributo NAME=...
RESULTADO: todas las imágenes se muestran simultáneamente sin desfase de tiempo,
incluídas las de los diferentes eventos del Roll-OVer. Si hubiésemos hecho la precarga estándar
las imágenes se mostrarían a saltos y se podrían dar situaciones curiosas como que,si durante
la carga ponemos el puntero sobre la imagen Roll-Over y lo sacamos de ella,foto1 foto2 foto3
se cargarían,pero al hacer onMouseOver de nuevo sobre el Roll-Over el Navegador volvería a
solicitar y cargar de nuevo foto2 pese a haberse cargado ya previamente para visualizarla en la
imagen central.
PÁGINA
CARGANDO
PÁGINA
CARGADA
Últimas consideraciones
El empleo de la función de precarga descrito en el artículo puede usarse en cualquier página

web con imágenes, sin embargo está especialmente recomendado en aquellas con gran
cantidad de gráficos dinámicos que reaccionan a eventos y que poseen imágenes de
proporciones considerables (que generalmente se "cortan" en otras más pequeñas
llamadas sectores o slices para recomponerla como una única imagen mediante TABLAS o con
posicionamiento CSS
Cargador universal de imágenes

El propósito del script que puede verse/descargarse más abajo tiene como objeto utilizar un
único javascript que nos sirva SIEMPRE y en cualquier página web para cargar las imágenes
que se vayan a utilizar. El ya utilizado en el punto 13 de este manual es válido igualmente,
pero está enfocado a las 3 imágenes concretas del ejemplo, guardadas en unas
rutas/directorios concretos y que utiliza 3 variables flags que dan por sentado que sólo
precargaremos esas 3 imágenes. De esto, deducimos que para adaptar ese script a nuestra
Web particular habría que modificar el código sustancialmente, lo que sería bastante
engorroso.
Lo que proponemos con el siguiente código es:

1. Transformar el script ya conocido para adaptarlo a un uso global.

2. Con un mínimo esfuerzo indicaremos rutas,nombres de imágenes,Variables y Aspecto de la
Precarga de TODAS las imágenes.
3. El ejemplo concreto está orientado a una página web home.html, por ejemplo, que es donde
se precarga todo y que al terminar nos redirige al verdadero inicio de nuestra página
inicio.html, que es donde se emplearán todas las imágenes cargadas.
INICIO DE CODIGO
<HTML>
<HEAD><TITLE>Cargando Imagenes</TITLE>
<STYLE TYPE="text/css">
DIV { background-color: black; color: white; border: 2px solid red; width: 30% }
</STYLE>
//Script por José.A Torres
//Majadahonda 2003
miArray = new Array ("imagenes/ElMenu_over00.jpg","imagenes/foto1.bmp","imagenes/foto2.bmp",

"imagenes/foto3.bmp","imagenes/pedazo1.jpg","imagenes/pedazo2.png",
"imagenes/pedazo3.jpg","imagenes/pedazo5.jpg","imagenes/pedazo6.png",
"imagenes/pedazo7.png","imagenes/pedazo8.jpg","imagenes/pedazo9.jpg");
document.write("IMAGENES BAJANDO A LA CACHE DE SU NAVEGADOR<BR>");
patron = new RegExp("imagenes/");
for (cont=0;cont<miArray.length;cont++) {
document.write("<DIV NAME='capa'>");
document.write("Imagen: " + miArray[cont].replace(patron,""));
document.write("<br>");
document.write("...en cola de Precarga OK<br></DIV>");
eval ("imagen" + cont + " = new Image();");

eval ("imagen" + cont + ".src = " + "\"" + miArray[cont] + "\";");
}
document.write("TODAS LAS IMAGENES YA ESTAN EN PRECARGA");
cont=0;
function pruebaCarga() {
if (eval("imagen"+cont).complete == true) {
window.defaultStatus= "Imagen"+cont+ "/" + miArray.length + " CARGADA";
cont++;
if (cont<miArray.length) setTimeout('pruebaCarga()',500);
else {
window.defaultStatus="Carga de imágenes TERMINADA";
window.open("inicio.html","MenuPrincipal","fullscreen=yes");
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#808AC2" onLoad="pruebaCarga();return true;">

</BODY>
</HTML>

FIN DE CODIGO
Explicación:
En un Array metemos las rutas relativas de todas las imágenes a precargar. En este caso,se
encuentran todas en la carpeta Imágenes, pero no hay problema en que estén en varias
diastintas mientras se indique en el array la ruta correcta.
El script crea automáticamente las referencias a cada objeto imagen para poder tener acceso a
cada objeto y a sus propiedades. La denominación automática es imagen0,imagen1,imagen2..
[...]..imagen+miArray.length-1
La línea de código
patron = RegExp("imagenes/");
y más adelante:
+ miArray[cont].replace(patron,"")
son pura estética. Con ambas indicamos a document.write que de los argumentos del Array omita
escribir en pantalla la subcadena: "imagenes/" para no mostrar la ruta completa, pues en
ciertos casos ésta podría ser bastante larga si tenemos una ruta demasiado larga. Si las rutas
fuesen por ejemplo "paginainicio/articulos/electrónica/imágenes/camaras..."
"paginainicio/articulos/electrónica/imágenes/moviles..."
podríamos asignar:
patron = RegExp("paginainicio/articulos/electrónica/imágenes/");
para omitir en cada imagen cargada esa cadena.
Lo mismo ocurre con las etiquetas <DIV> ...</DIV> se han utilizado para que el usuario mediante
hojas de Estilo incrustadas o por el atributo STYLE de DIV defina cómo se van a mostrar las
líneas que nos informan del progreso de carga en pantalla: colores,tamaños,fondo,bordes,etc.
Otro aspecto meramente de Forma.
Finalmente, cuando el navegador lee la última etiqueta HTML se llama repetidamente a una
función function pruebaCarga() que comprueba el estado de CADA imagen.Sobre los tiempo de
llamada (medio segundo en el ejemplo, o 500 milisegundos) conviene no abusar poniendo
valores como 1 milisegundo o en general valores más bajos de 250 o 300 pues podríamos
forzar demasiado los recursos del navegador y ,según en qué casos, obtener un error de "out
of memory".
Cada imagen que se detecta como cargada se reflejará en la barra de estado del navegador
(esquina inferior izquierda) y el total de las que hay. Finalmente, cuando todo está cargado la
página nos autoconduce con window.open a inicio.html donde ya podremos hacer libre uso de
todas las imágenes.
Podemos comprobar que todo ha funcionado de una forma simple: borramos antes de nada la
Caché de nuestro navegador y lo configuramos en "Actualizar la página cada vez que se
visita". A continuación ejecutamos la página cargadora de imágenes. Al terminar veremos en
Herramientas/Opciones de Internet/Configuración/Ver Archivos (en caso de Internet Explorer)
que efectivamente las imágenes han "bajado" correctamente, pese a no advertir el clásico
aviso del navegador de "Cargando imagen...", pues todo se hace en segundo plano.
Si volvemos a cargar la página una segunda vez, veremos que en la barra de Status las
imágenes se cargan a una gran velocidad, pues se detecta que ya están en la caché y no hay
necesidad de volver a cargarlas.
AVISO IMPORTANTE

Para probar el código es necesario "colgar" realmente las páginas en internet, o al menos que
las rutas indicadas en el Array apunten a cualquier carpeta contenedora de imágenes en
internet. Si probamos el ejemplo en "Local", en nuestro propio Pc, con las imágenes también
en nuestro ordenador, el script parece no funcionar, pero sólo parece. Esto es así porque el
Navegador no almacena las imágenes en su Caché, pues detecta que YA se encuentran en
nuestro disco duro y no hay necesidad de "bajarlas". Para que el Status "Imagen4/x Cargada"
se visualice en tiempo real,la ventana debe de tener el foco activo.Si al ejecutar la página la
minimizamos, el script seguirá ejecutándose correctamente y precargando, pero sólo al
seleccionarla otra vez veremos el nuevo Status actualizado.

Manual Tratamiento Imagenes Javascript

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Tratamiento Imagenes Javascript

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs

Autores del manual

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 1

Introducción al tratamiento de imágenes en Javascript

Artículo por Luciano Moreno

El objeto Image - La matriz images

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 2

que hemos introducido en la página mediante:

Artículo por Luciano Moreno

Propiedades del objeto Image

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 3

<script language="JavaScript" type="text/javascript">

<input type="button" value="dame names"

<script language= "JavaScript" type="text/javascript">

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 4

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 5

Artículo por Luciano Moreno

Eventos para imágenes

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 6

Nota cómo he situado la imagen anterior en el lateral izquierdo. Si la centro, como

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 7

<a href="#" ................ style="cursor:default;"><img src=............................></a>

Artículo por Luciano Moreno

El constructor de objetos Image

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 8

que, si no hemos declarado en la cabecera el objeto Image correspondiente a la nueva imagen

Artículo por Luciano Moreno

Aplicación práctica - Rollover simple

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 9

cript language="JavaScript" type="text/javascript">

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 10

<script language= "JavaScript"type= "text/javascript">

var estado = false;

imagenInicial = new Image(60,60);

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 11

y que podemos explicar un poco:

Artículo por Luciano Moreno

Aplicación práctica - Rollover múltiple

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 12

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 13

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 14

Artículo por Luciano Moreno

Artículo por Luciano Moreno

Más sobre el tratamiento de imágenes en Javascript. La

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 15

Lo que SÍ se explica en este artículo:

Artículo por José Alberto Torres Arroyo

La precarga de imágenes y el problema inicial

Personalmente me enfrenté al problema de precarga de imágenes en la web al crear una

Al cargarse B a partir de A teóricamente todos sus gráficos debían aparecer al instante en

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 16

Artículo por José Alberto Torres Arroyo

La explicación del fallo de la precarga de imágenes

imagen= new Image();

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 17

A su vez, al llegar a etiquetas <IMG> también comienza a precargar dichas imágenes en

Así, sobre la precarga de imágenes en Cache, la página con documentación de desarrollo de

Artículo por José Alberto Torres Arroyo

Las funciones estandar de precarga no valen

Tratamiento de imágenes en Javascript: http://www.desarrolloweb.com/manuales/19/ 18

Artículo por José Alberto Torres Arroyo

Función de precarga de imágenes en Javascipt que sí

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">