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
ó
document.bandera.width
- Acceso a la propiedad SRC de la imagen bandera:
document.images[1].src
Usuarios que han visto este tema también han visto...
- Listas Dependientes en JavaScript
- Efecto de transición FadeIn en imágenes con JavaScript
- Nivel de seguridad de un password en JavaScript
- Elementos de formulario select asociados con Javascript
- Cambiar el tamaño de letra dinámicamente
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.