HTMLpointHTMLpoint HTMLpoint.com


 Efectos en el background 1/2

 por Massimiliano Valente

La creación de un documento para el web es el resultado de una elección planificada y coherente. La impostación del diseño de página y la consecuente eleboración de los documentos sucesivos debe seguir una línea gráfica y cromática homogénea. En este contexto la elección de un color de fondo para el documento reviste una importancia fundamental. Un color de fondo oscuro, respecto a uno claro, caracteriza decididamente el documento y el mensaje que se quiere comunicar al visitante. No es éste el lugar para afrontar los criterios de elección cromática, que dependen de gustos y sentido estético personal; sin embargo sí debemos tratar aquí todos los recursos que HTML dinámico pone a disposición de los elaboradores.

Generar eventos dentro de un documento ya completamente cargado por el navegador es una de las características principales del HTML dinámico. En este caso específico, es posible modificar el color de background impostado con la clásica marca:

<BODY BGCOLOR="white">

En otras palabras, se accede al documento con un color de fondo impostado por la marca BODY (en este caso, blanco), el cual mediante una elección efectuada por el visitante puede ser modificado así como volver a recuperar después su aspecto original. Todo ello se realiza de una manera fácil e intuitiva gracias a una paleta de colores. Además de la opción principal de cambio del color del fondo, la demo que figura a continuación prevé también efectos en el color del texto presente en el documento.

Antes de nada, es necesario impostar la hoja de estilo que crea la paleta con la cual se pueden elegir otros colores. Se trata de una serie de tablas de colores que convenientemente impostadas crean un efecto muy parecido a las clásicas "color paleta" de los programas comunes de retoque de fotos:


Los campos TABLE y TD impostan la altura, la anchura y el tipo de cursor de las tablas, mientras que H1 es la marca para la formatación del texto.

Una vez impostada la hoja de estilo, se opera dentro de la marca BODY, insertando el código, que omitimos aquí pero presente integralmente en todos los ejemplos del cd-rom que se adjunta a la revista. Dicho código se abre con la siguiente línea:

<DIV ONCLICK="colorSelector()">

El gestor de eventos ONCLICK prevé que se invoque la función "ColorSelector()" cuando el cursor del ratón hace clic en un color de la paleta. Así pues, para que el fondo cambie es necesario que el usuario haga clic en el color. Es posible sustituir ONCLICK con dos diferentes gestores de eventos: ONMOUSEOUT y ONMOUSEOVER.

El primero de los dos prevé que el fondo cambie cuando el cursor del ratón sale del área de enlace después de haber entrado. El segundo, sin embargo, modifica el color de fondo cuando el cursor del ratón entra en la zona de enlace.


  Vuelve a principio de página