HTMLpointHTMLpoint HTMLpoint.com


 Fondo redimensionable ... 2/2

  semana 39 - 02 noviembre 1999

esempio01.html

En este file se producen los efectos del script. Hemos creado una imagen de fondo denominada "fondo01.jpg" y pretendemos volverla redimensionable en base a las dimensiones de la ventana. El código se inserta, en parte, entre las marcas <HEAD> y, en parte, en el cuerpo del documento. En el encabezamiento del documento (HEAD) se inserta el siguiente código:

Las primeras líneas de código contienen las referencias a las versiones del navegador y al diferente DOM (Document Objcet Model) soportado por Netscape e Internet Explorer.

Las variables "scaleWidth" y "scaleHeight" están gestionadas mediante los valores booleanos "true" o "false". La variable "scaleWidth" impostada en "true" regula automáticamente las proporciones respecto a la anchura de la imagen (width); mientras que la variable "scaleHeight" regula las proporciones automáticas respecto a la altura (height).

"ImSRC" contiene la imagen de fondo "fondo01.jpg" que, como ya hemos mencionado antes, no se invoca en el elemento <BODY>.

Sucesivamente, mediante document.write(imStr); se invoca la imagen dentro del documento. Conviene recordar que write() es un método del objeto "document" y se utiliza para importar código HTML dentro de la ventana especificada.

Una vez impostado el código entre los elementos <HEAD>, el paso sucesivo es la inserción del siguiente código en el cuerpo del documento (tras la marca <BODY>):

Se ha mencionado el carácter crossbrowse de esta demo con los dos software de navegación más difundidos. En realidad, visualizando el ejemplo sin ninguna otra modificación se nota una diferencia de visualización con Netscape, el cual, al contrario que MsIe, deja un espacio entre la imagen y el borde superior izquierdo.

Para resolver esto, es suficiente insertar en el elemento el siguiente código:

  Vuelve a principio de página