 
 |
|
|
semana 66 - 08 mayo 2000
La presencia de menús gráficos en las páginas web es una costumbre consolidada. Utilizando un escaso número de colores y dimensiones reducidas, se obtienen imágenes con un peso irrisorio pero con un impacto estético de gran interés. Las cosas se complican cuando se quiere añadir a la imagen un efecto onmouseover, es decir, el típico botón que se anima cuando pasa el ratón para después volver a recuperar su aspecto original. Esta lista de distribución ha mostrado varias vexes cómo obtener resultados de este tipo. He aquí una serie de referencias interesantes:
http://www.htmlpoint.com/mailing/archivo/04/index.html
http://www.htmlpoint.com/mailing/archivo/24/index.html
http://www.htmlpoint.com/mailing/archivo/33/index.html
http://www.htmlpoint.com/mailing/archivo/42/index.html
El script de esta semana tiene un efecto similar pero obtenido con un código diverso, muy simple e intuitivo.
Desde un punto de vista técnico, el script utiliza profusamente las propiedades de las hojas de estilo, lo cual excluye el funcionamiento con Netscape 4. El script funciona perfectamente en MsIe 4 o superior y en Netscape 6.
El ejemplo consta de 4 file:
Para comprender más fácilmente el presente script, haz siempre referencia a los file antedichos, verificando los procedimientos y datos expresados. Sólo de esta manera, con una comparación continua, podrás entender las peculiaridades de este Javascript.
Éste es el file que simula nuestro documento HTML, en el cual queremos insertar el efecto onmouseover en las tres imágenes (01.gif, 02.gif y 03.gif).
Antes de nada, tenemos que impostar la hoja de estilo en el encabezamiento del documento (<HEAD>):
".borderimage" determina el espesor en píxel (px) del borde y el color (white) que debe tener cuando no queda activado por el paso del ratón. Intentad modificar el color de white a black para verificar el resultado.
Una vez impostada la hoja de estilo, insertarermos, siempre entre las marcas , el siguiente código:
| |
|
|
|
|
