Todo sobre imágenes en JavaScript
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), y
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 este, basta
con escribir:
document.images.length.
Ejemplos:
- Acceso a la propiedad WIDTH de la imagen bandera:
document.images.bandera.width
o
document.bandera.width
- Acceso a la propiedad SRC de la imagen bandera:
document.images[1].src
Ejemplo práctico: vamos a mostrar en pantalla la anchura
de la imagen siguiente:
que hemos introducido en la página mediante:
<img src="/articulos/archivos/art79a/logo.gif"
name="logotipo" width="249" height="28"
border="0">
y para ello escribimos:
<form>
<inputtype="button"value=
"dimeanchura"onClick="alert('anchura='+document.logotipo.width)">
</form>
que podemos ver en acción pulsando el botón creado:
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 escribir:
document.logotipo.width="500"
que podéis comprobar pulsando el siguiente botón:
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.
Eventos para imágenes.-
El objeto Image admite sólamente 3 eventos comunes a los
3 navegadores comunes: 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="/articulos/archivos/art79a/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="/articulos/archivos/art79a/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="/articulos/archivos/art79a/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="/articulos/archivos/art79a/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="/articulos/archivos/art79a/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="/articulos/archivos/art79a/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, si no 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="/articulos/archivos/art79a/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="/articulos/archivos/art79a/logo.gif";
La declaración de los objetos Image que va a haber 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, como
ocurre con los famosos rollovers, ya 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 una objeto Image dentro del HEAD de la página,
dándo la ruta de su imagen asociada, se conoce también con el nombre de Precarga
de imagen, ya que efectívamente se consigue con la declaración que el navegador
cargue la imagen en memoria.
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, y 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 esta, 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 este 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 pués:
<a href= "#"
onmouseOver="document.ejemplo.src='/articulos/archivos/art79a/avatar2.gif';"
onClick="return false;">
<img name="ejemplo" src="/articulos/archivos/art79a/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='/articulos/archivos/art79a/avatar2.gif';" onClick=
"return false;"
onmouseOut="document.ejemplo.src='/articulos/archivos/art79a/avatar.gif';">
<img name="ejemplo" src="/articulos/archivos/art79a/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:
<script
language="JavaScript" type="text/javascript">
imagenOn = new Image(60,60);
imagenOn.src = "/articulos/archivos/art79a/avatar2.gif";
</script>
</head>
<body>
<Palign= center>
<A href= "#" onclick="returnfalse;"
onmouseover="document.ejemplo.src='/articulos/archivos/art79a/avatar2.gif';"
onmouseout="document.ejemplo.src='/articulos/archivos/art79a/avatar.gif';">
<IMG name="ejemplo" src="/articulos/archivos/art79a/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 = "/articulos/archivos/art79a/avatar.gif";
imagenOn.src = "/articulos/archivos/art79a/avatar2.gif";
imagenClick.src = "/articulos/archivos/art79a/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 = "/articulos/archivos/art79a/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.
Seguídamente 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, si no 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 detení;damente 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
porqué ocurren estos cambios en una imagen.
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 soméramente:
<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="/articulos/archivos/art79a/homeOff.gif";
homeOn.src="/articulos/archivos/art79a/homeOn.gif";
html.src="/articulos/archivos/art79a/htmlOff.gif";
htmlOn.src="/articulos/archivos/art79a/htmlOn.gif";
java.src="/articulos/archivos/art79a/javaOff.gif";
javaOn.src="/articulos/archivos/art79a/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="/articulos/archivos/art79a/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="/articulos/archivos/art79a/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="/articulos/archivos/art79a/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 grán mayoría de los navegadores actuales soportan el objeto Image de
JavaScript.
|
Del.icio.us
Facebook
Technorati
