Artículos
Javascript

Cambiar el tamaño de la imagen de forma dinámica

12/Ene/2007

Lo bueno del DOM de una página es que puedes acceder a los diferentes elementos de la página de una forma normalizada y modificar sus propiedades. Esto nos permite hacer cosas como modificar el tamaño de una imagen de forma dinámica.

Para empezar hay que crear una imagen dentro de un documento HTML. Para ello utilizaremos la etiqueta img. Veamos como quedaría la línea de código:

Aunque lo realmente importante es el código JavaScript que modifique las propiedades de la imagen. Para ello crearemos una función JavaScript a la que llamaremos cambiaTamanio, la cual pondremos dentro de las etiquetas script dentro de la cabecera de la página. Veamos como quedaría esto en nuestra página HTML:



Cambiar el tamaño de la imagen de forma dinamica









Dentro de esta función, lo primero será acceder al objeto que tiene la imagen. Para ello necesitamos conocer su identificador, que será el nombre que hayamos puesto al atributo ID. Y utilizar el método getElementById, pasandole como parámetro dicho ID.

Una vez que tengamos el elemento de la página podremos acceder a las propiedades del mismo y modificarlas. En este caso nos interesan el alto (height) y ancho (width) de la imagen. A las cuales daremos un tamaño diferente al que tienen.

function cambiaTamanio(){
  logo = document.getElementById("logo");
  logo.width = 200;
  logo.height = 200;
}

Uno de los inconvenientes es que ciertos navegadores no soportan el modificar los datos de una imagen obteniéndola mediante .getElementById().

En otros navegadores como el Internet Explorer tienen arrays que reflejan las imágenes del documento que se ha cargado. A este array se accede mediante document.images y en concreto a una imagen mediante la siguiente línea de código:

document.images.logo.width=200;
document.images.logo.height=200;

A si que nuestra función JavaScript validará si tiene dicho array, sino lo tiene accederá directamente al elemento. Es por ello que nuestro código de función queda de la siguiente forma:

function cambiaTamanio(){
  if (document.images) {
    document.images.logo.width=200;
    document.images.logo.height=200;
  } else {
    logo = document.getElementById("logo");
    logo.width = 200;
    logo.height = 200; 
  }
}

Ahora solo falta lanzar esta función. Esto lo podemos hacer, por ejemplo, mediante un botón y su evento onClick. Veamos la línea de código:

Código Fuente

Descárgate el código fuente de Cambiar el tamaño de la imagen de forma dinámica
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
12 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios