Redimensionar tamaño de la ventana para adaptarla a una imagen.
| Descripción del ejemplo JavaScript
El Script tiene una función (AdaptarVentana()) que es llamada desde el evento onLoad de la imagen utilizada. Es decir, la función se ejecutará cuando se ha terminado de cargar la imagen en la página. Esto permite que el navegador identifique el objeto (en este caso la imagen) y lea las propiedades de la misma (las propiedades que nos interesan son el ancho y el alto).
Lo primero que realiza el Script es guardar en dos variables el ancho y alto de la imagen. Las variables altoImagen y anchoImagen tomarán respectivamente los valores de la propiedad height y width de la imagen.
Una vez más vemos las incompatibilidades de los navegadores en cuanto al manejo de sus propiedades en el lenguaje JavaScript. Es por eso que debemos crear dos condiciones diferentes, una para que se ejecute solo si la página es visualizada con Internet Explorer y la otra condición se ejecutará en navegadores de la empresa Mozilla (Nescape, Firefox).
Entonces, la primera condición verifica que el navegador utilizado sea IE, si es así se ejecuta el método resizeTo() para el objeto window (también podemos utilizar el objeto self). Por desgracia este método redimensiona la ventana teniendo en cuanta los pixeles del ancho y alto de toda la ventana y no los del área de trabajo (el <BODY>), es decir, tiene en cuenta los bordes y la barra de desplazamiento (en lo que se refiere al ancho) y todas las barras de herramientas y barra de estado (en lo que se refiere al alto). Es por eso que debemos agregar unos cuantos pixeles a las variables para que la imagen se visualice en su totalidad (30 para el ancho y 140 para el alto).
Este problema no lo tenemos con Firefox ya que dispone de dos propiedades (innerWidth / innerHeight), que nos permiten cambiar el ancho y alto de la ventana teniendo en cuenta solo el área de trabajo.
El Script funciona sin problemas independientemente de la resolución de pantalla de la computadora donde se ejecuta. En Internet Explorer ocurren problemas de visualización cuando el navegador no tiene activa alguna barra de herramienta estándar (por ejemplo la de vínculos) ya que el redimensionamiento se realiza según el alto de la imagen + 140px de alto por lo que si falta alguna barra de herramienta quedará visible un espacio debajo de la imagen, lo mismo pero a la inversa sucede cuando tenemos más barras de herramientas. En este caso la parte de la imagen quedará oculta.
Para que la imagen quede visible por completo debemos colocar los atributos de márgenes a la etiqueta <BODY> y darles a todos valores 0 (cero).
Como dijimos, la imagen debe tener el atributo name con el valor que utilizaremos para capturar el ancho y alto de la misma en las variables correspondientes. Además colocamos el evento onLoad para llamar a la función una vez cargada la misma.
Información relativa al Script
Tamaño del Script: 1KB
Probar el Script
Comentarios: En ciertos casos podemos tener problemas de visualización con IE. Esto depende exclusivamente de la configuración en el navegador del visitante.
Temas relacionados a este ScriptEjemplo JavaScript para redimensionar el tamaño de una ventana y la adapta a las dimensiones de una imagen u objeto cargado en la página.
Código fuente del script:
