HTMLpointHTMLpoint HTMLpoint.com


 Botones activos en JavaScript 1/2



Cada vez es más frecuente encontrarse con sitios Web que utilizan botones clicables. Con estos términos nos referimos a las imágenes que, surgidas del puntero del ratón, cambian de aspecto produciendo efectos gráficos cautivadores que, desde un punto de vista meramente técnico, los genera applet Java o el código JavaScript. Sobre el análisis técnico de estos últimos se centra el presente artículo, a través del la presentación del código fuente y el correspondiente ejemplo práctico.

El funcionamiento de tales script conceptualmente resulta muy sencillo: en el momento en que el ratón pasa por el área de imagen, ésta es sustituida por otra colocada anteriormente, generando un efecto similar a la presión de un botón.

Antes de empezar, es necesario, por tanto, crear dos imágenes:

imagen01.gif: que se carga junto con la página y permanece visible hasta que el puntero del ratón no pase por encima;

imagen02.gif: que, sin embargo, se ve cuando el puntero del ratón pasa por el área de enlace y desaparece cuando sale de ella.

Las dos imágenes pueden incluso contar con extensiones diferentes (una JPG y la otra GIF, por ejemplo), pero obligatoriamente tienen que tener las mismas anchura y altura. No respetar estas condiciones provoca efectos gráficos pésimos.

El primer ejemplo que se ofrece en este artículo sirve para realizar una imagen clicable del logotipo de HTMLpoint, que, a partir del blanco y negro inicial, toma los colores originales cuando lo toca el puntero del ratón. Para hacerlo, es suficiente crear dos imágenes idénticas del logotipo y, sólo para una de ellas, asignar los colores en escala de gris. Cualquier programa de tratamiento fotográfico puede realizar esta operación.

Para crear las imágenes, es necesario programar correctamente el script, que se coloca en dos partes distintas del código fuente del documento.

La primera parte se pone entre los Tag <HEAD></HEAD>, y es la que se refiere principalmente a la sintaxis JavaScript:

La segunda parte del código se mete en los Tag , e invoca la imagen asociándola a los eventos del script:
Muestra el ejemplo práctico



  Vuelve a principio de página
1997-2000 - Gráfica, layout y guías son propiedad exclusiva de HTMLpoint s.r.l.