Cambiar el color de fondo en el texto.

El Script utiliza código CSS y JavaScript para realizar cambios en las propiedades de las celdas y enlaces de la página. Si sabemos algo de CSS podemos configurar el ejemplo a nuestro gusto, asignando los atributos y valores correspondientes a cada elemento.

Lo primero que encontramos en el JavaScript es el código que nos permite definir, mediante variables, los colores de fondo y texto para los enlaces del menú. Las variables fcolor1, fcolor2, fcolordefault y textcolor1 guardan un valor de color en sistema hexadecimal. El definir los colores para cada uno de los fondos y texto permite controlar mediante una sola línea los valores que tomarán todos los elementos que utilicen esta variable. Además el código nos queda "más a mano" para su posterior configuración.

Mediante la etiqueta <STYLE> definimos el valor de algunos atributos para los enlaces del menú.

• font-size: tamaño de fuente
• font-family: tipo de fuente
• text-decoration: subrayado del enlace
• color: color del enlace de texto
• font-weight: estilo de fuente negrita

Para cambiar el color de fondo en la celda que contiene al enlace utilizamos el evento onMouseOver. Como valor escribimos la propiedad bgColor y damos el valor de la variable fcolor[1][2]. Mediante el evento onClick definimos que el objeto window.location tome como valor la URL escrita. El evento onMouseOut cambia el color de la celda al valor definido en fcolordefault.

Para complementar el ejemplo utilizamos una imagen que aparece y desaparece al lado del texto del enlace. Este cambio en la propiedad visibility la controlamos mediante los eventos onMouseOver y onMouseOut de la fila que contiene el enlace y la imagen. Si agregamos más enlaces al menú tenemos que asegurarnos de cambiar los id para cada una de las imágenes que acompañan al mismo.