El constructor de objetos Image

10/6/01 -

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.

Autoría, licencia y acciones sobre este artículo

Informe de Luciano Moreno* Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario. URL: http://www.htmlweb.net/ Atención: Contenido exclusivo de DesarrolloWeb.com y HTMLWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba