Efectos en el background

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:

TABLE {background:white}

TD {width:20pt; height:20pt; cursor:default}

H1 {font-size:20; font-family:arial}

</STYLE>

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.

Hasta ahora hemos examinado el cambio del color de background, pero no el cambio dinámico de una imagen de fondo. En el web actual la inmensa mayoría de los documentos invoca un fondo de imagen en GIF o JPG mediante la marca:

<BODY BACKGROUND="nome_imagen.jpg">

En el ejemplo que hemos visto antes, no se contempla esta posibilidad en el sentido de que en presencia de un fondo de imagen preexistente, los efectos de la demo no se producen.

El segundo ejemplo de este artículo pretende explicar cómo HTML dinámico permite modificar también la imagen de background sin limitarse a un único color. El funcionamiento es muy similar al precedente, con la primera diferencia evidente de que las imágenes GIF y JPG sustituyen a la paleta de colores antes vista.

Dentro de la marca BODY se inserta el código que imposta la función "tile()":

<script language="JavaScript1.2">

<!--

function tile(){

if (!document.all)

return

var source=event.srcElement

if (source.tagName=="IMG")

document.body.style.backgroundImage="url("+source.src+")"

}

//-->

</script>

Después, en el cuerpo del documento se introduce la referencia a la función "tile()". Las imágenes formarán el fondo del documento y será en ellas donde tiene que hacer clic el visitante:

<div class="bgimages" onClick="tile()" STYLE="position:absolute; top:150px; left:150px">

<img src="sfondo01.jpg" width=100 height=100 alt="Background 1">

<img src="sfondo02.gif" width=100 height=100 alt="Background 2" hspace=10>

<img src="sfondo03.jpg" width=100 height=100 alt="Background 3">

<img src="sfondo04.jpg" width=100 height=100 alt="Background 4" hspace=10>

</div>

Como antes, también en este caso, el gestor de eventos onClick puede sustituirse con onMouseOver y OnMouseOut.

Siguiendo el modelo de este código, es posible impostar un documento que cargue una imagen de fondo diferente cada vez que se abre la página. Éste es el código que hay que insertar entre las marcas HEAD del documento:

<script language="JavaScript">

var backgr1="sfondo01.jpg"

var backgr2="sfondo02.gif"

var backgr3="sfondo03.jpg"

var cur=Math.round(6*Math.random())

if (cur<=1)

backgr=backgr1

else if (cur<=4)

backgr=backgr2

else

backgr=backgr3

document.write('<body background="'+backgr+'" bgcolor="white" text="black" link="blue" vlink="blue" alink="red">')