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

12/Ene/2007 JavaScript , , 10 Comentarios

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:

  1. <img src="firefox.jpg" id="logo" title="FireFox"/>

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:

  1. <title>Cambiar el tamaño de la imagen de forma dinamica</title>
  2. function cambiaTamanio(){}
  3. </script>
  4. </head>
  5.  
  6. <img src="firefox.jpg" id="logo" title="FireFox"/>
  7.  
  8. </body>
  9. </html>

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.

  1. function cambiaTamanio(){
  2. logo = document.getElementById("logo");
  3. logo.width = 200;
  4. logo.height = 200;
  5. }

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:

  1. document.images.logo.width=200;
  2. 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:

  1. function cambiaTamanio(){
  2. if (document.images) {
  3. document.images.logo.width=200;
  4. document.images.logo.height=200;
  5. } else {
  6. logo = document.getElementById("logo");
  7. logo.width = 200;
  8. logo.height = 200;
  9. }
  10. }

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:

  1. <input type="button" onClick="cambiaTamanio()" value="Cambiar tamaño"/>

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

10 comentarios en “Cambiar el tamaño de la imagen de forma dinámica”

Víctor Cuervo

Víctor Cuervo

@Onihc, me alegro que te haya servido. 😀

Víctor Cuervo

Onihc

Solamente es de adaptar las propiedades HTML al DOM, muy util, no sabia como hacerlo gracias!

Víctor Cuervo

Oli

Hola, no tengo ni idea de javascript pero necesito un codigo parecido pero q me sirva para redimensionar 3 campos file antes de hacer el upload. Me puedes ayudar??

Víctor Cuervo

lineadecodigo

@jose,

¿Qué tipo de mensajes? ¿Email?
Especifica un poco más que te gustaría que explicásemos.

Víctor Cuervo

jose

hola me podias ayudar para hacer un sevic io de msj para tu misma pagina (comentarios)

Víctor Cuervo

Martin

La verdad que esta muy bien explicado, es algo simple o mas bien a modo de introduccion para orientarnos el manejo de imagenes de forma dinamica.

Muchas gracias

pd.: Marcela, si no te mostro lo que querias saber tendria que especificar que queres saber, porque una sola respuesta no puede contestar todas las preguntas.

Luis: eso se puede hacer con javascript o con php. (asp no tengo ni la mas minima idea).

Javier: cualquier tuto de html explica como modificar el

Víctor Cuervo

Javier

hey y como lo haria parea en vez de cambiar por medio de un boton , cambiar los parametros height y width con cajas de texto en html??

Víctor Cuervo

Luis bechara

como verificar el tamaño, ancho y alto de una imagen antes de ser enviado un formulario con el boton examinar, donde un usuario ubica un archivo en su PC y lo sube al servidor

Víctor Cuervo

marcela domingues

no me mostro lo que queria saber
no sirve…..

posdata: actualicense

Víctor Cuervo

exodo

joya esta muy bueno

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*