 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
El objeto Image - La matriz images
Explicamos los métodos para acceder a las propiedades de las imágenes.
10/6/01 -
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
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:
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:
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.
+ 1 categoria relacionada
+ 1 comentario no revisado
| 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.
|
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
