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:
