Image JavaScript. new, complete, naturalWidth. Obtener todas las imágenes web: document.images (CU01186E)

Resumen: Entrega nº86 del curso "Tutorial básico del programador web: JavaScript desde cero".
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.

logo javascript

 

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.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MARZO - ABRIL 2017

1. Java / J2EE
2. Entornos Oracle
3. JavaScript, jQuery
4. .NET, C#
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación