HTMLpointHTMLpoint HTMLpoint.com


 Botones animados link scrorrevoli 1/2

 por Massimiliano Valente

Construir un buen sitio web significa, sobre todo, partir de una planificación que tenga en cuenta ciertos aspectos fundamentales para una correcta navegación. Así, la presencia de un sistema de navegación interna claro y completo representa un elemento que condiciona, para bien o para mal, la futura realización de las páginas. Esta exigencia quedará satisfecha con un buen menú, que considere las necesidades de los navegantes que deben partir de él para sus navegaciones y búsquedas. Si por un lado los argumentos hasta ahora expuestos harían necesario un menú de navegación en cada página, por el otro exigencias estéticas y puramente estructurales apuntarían a lo contrario. En los sitios de grandes dimensiones, compuestos por decenas o centenares de secciones, comprimir todas ellas en un menú de navegación no haría sino dificultar en lugar de facilitar la visita al sitio. Una estratagema útil para evitar este problema consiste en definir macroáreas dentro de las cuales se desarrollan contenidos de nivel jerárquico inferior. A pesar de ello, muchos diseñadores web sienten la exigencia de hacer que la presencia del menú de navegación sea lo más discreta posible. La demo de este mes intenta satisfacer esta exigencia y armonizarla con efectos estéticos de fuerte impacto. El ejemplo, que explota las especificaciones crossbrowser de la colocación dinámica y el modelo de objetos de Dynamic HTML, permite crear un menú de navegación con botones animados gracias al clásico efecto onMouseOver-OnMouseOut, muy usado en la red, así como las correspondientes descripciones con movimiento dinámico vertical. Todo ello en un espacio muy limitado de sólo algo más de 330x30 píxel, a fin de colocarlo dentro de marcos o en partes definidas de la página.

La demo consta de algunas imágenes en formato .GIF sin las cuales el efecto gráfico deseado no se produce. Parte de estas imágenes son necesarias para la creación de los seis botones de 26x26 píxel que invocan otros tantos enlaces:

1.gif, 2.gif, 3.gif, 4.gif, 5.gif , 6.gif Para que dichas imágenes cambien de aspecto cuando pasa el ratón con los típicos efectos onMouseOver-OnMouseOut, es necesario crear un numéro equivalente de imágenes del mismo tamaño pero colores diferentes:

1_b.gif, 2_b.gif, 3_b.gif, 4_b.gif, 5_b.gif , 6_b.gif Una vez creados los botones clicables, es el turno de las imágenes que se desplazan a la izquierda cuando pasa el ratón por una de las imágenes creadas previamente:

text0.gif, text1.gif, text2.gif, text3.gif, text4.gif, text5.gif, text6.gif

Las imágenes tienen que tener las mismas dimensiones (en nuestro ejemplo, 130x25 píxel) y una numeración progresiva. La imagen "text0.gif" se visualiza al abrir la página y permanece inalterada hasta que el ratón entra en el área de enlace de los botones. Cuando el botón sale del área de enlace, la imagen "text0.gif" vuelve a su estado original.

La hoja de estilo que abre la demo establece algunos valores importantes relativos a la colocación de los elementos en la página y en las correspondiente áreas de recorte:


Muestra el ejemplo práctico


El espacio en el que están insertados los botones está establecido por #divBottomButtons, que en nuestro caso específico indica 200 píxel de ancho (width) y 26 de alto (height). El atributo visibility impostado en hidden ignora cualquier valor heredado y permanece escondido hasta que las impostaciones del código sucesivo no invoquen su uso. Dicho de otro modo, la propiedad visibilility hace que los elementos se vuelvan transparentes con el flujo del texto del documento.

#divBottomText y #divBottomCont contienen las imágenes de comentario (text1.gif, text2.gif, etc.) que se visualizan con desplazamiento vertical cuando el ratón entra en el área de enlace de los botones. En particular, el código clip:rect(0,130,25,0); establece el área de recorte dentro de la cual se visualizan las imágenes.


  Vuelve a principio de página