Codificación aprenderaprogramar.com: CU01186E
OBJETOS DE TIPO IMAGE JAVASCRIPT
Ya conocemos que podemos crear un nodo del DOM de tipo imagen usando una expresión como document.createElement('img'). Sobre ese nodo podemos especificar las propiedades de la imagen como alt, src, etc. y podemos insertar el nodo en el documento HTML. Existe una forma alternativa basada en los denominados objetos tipo Image que se crean invocando new Image() como veremos a continuación.
OBJETOS DE TIPO IMAGE EN JAVASCRIPT
JavaScript define el tipo de datos HTMLElement que nos permite representar nodos del DOM. Como subtipo de HTMLElement tenemos HTMLImageElement, que permite crear nodos <img> y dispone de atributos y métodos adicionales para este tipo de nodos de imagen.
Veamos en primer lugar cómo crear un objeto de tipo HTMLImageElement. La sintaxis a utilizar es la siguiente:
| var image1 = new Image(opcionalWidth, opcionalHeight); |
Los valores de width (anchura) y height (altura) son opcionales. Si se especifica un solo valor se entiende que se refiere al valor width para la imagen.
El contenido de un nodo (por ejemplo lo que visualizaremos si tratamos de mostrarlo por pantalla) será el código HTML generado para la etiqueta img. Escribe este código y comprueba sus resultados (cambia la ruta de la imagen utilizada si lo deseas):
|
<!DOCTYPE html> <html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"> <script type="text/javascript"> function ejemploObjetos() { var imagen1 = new Image(600, 400); imagen1.src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_divulgacion/35_errores_en_programacion.jpg'; alert('Vamos a añadir un nodo al DOM de tipo: '+imagen1); document.body.appendChild(imagen1); alert ('El código HTML ha quedado así: \n\n' + document.body.innerHTML + '\n\n'); } </script> </head> <body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div> <div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div> </body> </html> |
El resultado esperado es que una vez pulsamos sobre “Probar” se muestre lo siguiente (además, debe aparecer la imagen una vez que añadimos el nodo img al elemento body del documento):
|
Vamos a añadir un nodo al DOM de tipo: [object HTMLImageElement] El código HTML ha quedado así: <div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div> <div style="color:blue;" id="pulsador" onclick="ejemploObjetos()"> Probar </div> <img src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_divulgacion/35_errores_en_programacion.jpg" height="400" width="600"> |
PROPIEDADES Y MÉTODOS DE OBJETOS TIPO IMAGE
Disponemos de propiedades y métodos aplicables a los objetos de tipo Image. Algunas propiedades a destacar son:
|
SINTAXIS |
UTILIDAD |
Ejemplos aprenderaprogramar.com |
|
img1.alt |
Define el atributo alt (texto alternativo) para la imagen |
img1.alt = 'Humor informático'; |
|
img1.complete |
Devuelve un valor booleano que es true si la imagen ha sido completamente cargada por el navegador o false en caso contrario. |
document.getElementById("img1").complete; Nota: puede no dar los resultados deseados si la imagen está cacheada o si la imagen se ha definido a través de JavaScript. |
|
img1.width |
Define el atributo width (anchura) de la imagen, en píxeles |
img1.width=200; |
|
img1.height |
Define el atributo height (altura) de la imagen, en píxeles |
img1.height=200; |
|
img1.naturalWidth |
Devuelve el ancho de la imagen original en píxeles |
img1.width=img1.naturalWidth; Nota: la url de la imagen debe estar definida para poder recuperar su tamaño |
|
img1.naturalHeigth |
Devuelve la altura de la imagen original en píxeles |
img1.height=img1.naturalHeight; Nota: la url de la imagen debe estar definida para poder recuperar su tamaño |
|
img1.src |
La url de la imagen, relativa o absoluta |
img1.src = 'dibujo.jpg'; |
OBTENCIÓN DE TODAS LAS IMÁGENES EN UN DOCUMENTO HTML
El objeto document tiene una propiedad relacionada con imágenes que es interesante, ya que nos permite recuperar una colección de objetos imagen con todas las imágenes presentes en el documento HTML, ordenadas según su orden de aparición en el documento HTML. Para ello se usa esta sintaxis:
| var coleccionDeImagenes = document.images; |
Dado que obtenemos una colección, podemos acceder a un elemento de la misma usando un índice (siempre que el índice sea válido). Por ejemplo coleccionDeImagenes[2] nos devolvería el nodo del DOM con la tercera imagen que aparece en el documento. También se admite la sintaxis document.images.item(2) con el mismo resultado.
También podemos usar la propiedad length de las colecciones para saber cuántas imágenes han sido encontradas. Por ejemplo alert ('Se han encontrado '+document.images.length +' imágenes');
EJERCICIO
Un programador ha desarrollado un código y nos han pedido que lo revisemos. Escribe este código en un editor y responde a las siguientes preguntas (nota: cambia la ruta de las imágenes si quieres):
|
<html><head><script type="text/javascript"> image01= new Image() image01.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png" image02= new Image() image02.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/DV00405A_1.jpg" function rollover(imagename, newsrc){ document.images[imagename].src=newsrc.src } </script></head> <body style="text-align:center; margin:50px;"> <p> Pasa el mouse sobre la imagen </p> <a href="#" onmouseover="rollover('example', image02)" onmouseout="rollover('example', image01)"> <img src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png" name="example"> </a> </body></html> |
a) ¿En qué ámbito se encuentran image01 e image02?
b) ¿Qué tipo de objetos son image01 e image02?
c) ¿Aparecerán errores debido a la falta de puntos y coma de terminación en las instrucciones de JavaScript? ¿Por qué?
d) Al acceder a una imagen con la sintaxis document.images[imagename], ¿se está usando un índice numérico para acceder a la colección? Si es numérico, indicar qué valores son los que se usan. Si no es numérico, indicar qué tipo de índice es.
e) El efecto esperado es que la imagen que se muestra cambie cuando pasamos el puntero del ratón por encima de ella. ¿Por qué se produce ese cambio? Explícalo brevemente.
Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
