HTMLpointHTMLpoint HTMLpoint.com


 Efectos dinámicos en enlaces 1/2



Entre las características introducidas por las hojas de estilo, una de las más interesantes y atractivas es, sin lugar a dudas, la posibilidad de personalizar los enlaces de texto de las páginas web con pocas líneas de código, breves y concisas. Con este término entendemos los normales enlaces de texto creados con los típicos hyperlink. He aquí un ejemplo: HTMLpoint Si no está previsto diversamente, los enlaces textuales aparecen subrayados y con colores estándar según el sistema operativo y el navegador utilizados.

Como adelantábamos en la apertura, las hojas de estilo permiten personalizar el efecto link y activarlo con particulares efectos al paso del ratón.

Las CSS (cascading style sheets) fueron introducidas por Microsoft en la tercera versión de Internet Explorer, y son soportadas, parcialmente, por Netscape sólo desde su cuarta versión. Quienes accedan con un navegador obsoleto a un documento formateado con las hojas CSS, se encontrarán ante una página gestionada por las opciones por defecto del navegador (el fondo, por ejemplo, será gris; el tipo de texto, "times new romans", etc.).
Las CSS fueron reconocidas y normalizadas oficialmente por el W3C (consorcio internacional para el desarrollo del web) en las rexomendaciones "CSS1" antes, y "CSS2", posteriormente.

Aunque oficialmente normalizadas por el W3C, las hojas de estilo son soportadas plenamente sólo por MsIe 4 y sucesivas, y sólo en parte por Netscape. Los efectos en los enlaces, en particular, generan todos sus resultados en MsIe, pero se limitan a la ausencia de subrayado en Netscape. En conclusión: los visitantes que accedan a la página con Netscape verán una cosa diferente de la que verán los que accedan con MsIe.

Javascript ofrece una solución a este problema. En este artículo mostraremos cómo, mediante un uso conjunto de script y hojas de estilo, se puede llegar a obtener un efecto linkover compatible con ambos navegadores.

Hemos hecho antes referencia a las potencialidades de las hojas de estilo y es precisamente con una CSS incorporada (no vinculada externamente a un file con extensión .css, sino incluida en el documento) que se abre el script de este mes:

Este código priva a los enlaces del subrayado (text-decoration: none) para ambos navegadores y establece, para MsIe, que cuando el enlace se active (A:hover) su color de background se vuelva amarillo (yellow) y el color del enlace negro (black). Para obtener el efecto Linkover en Internet Explore, basta este breve código pero no sucede lo mismo con Netscape, que se limitaría tan sólo a eliminar el subrayado de los enlaces.

Además de la impostación de las propiedades hover, son fundamentales las dimensiones y el estilo del texto. Sin el código:

font-size: 15px; font-size:16px; font-family:arial; font-weight:bold

el resultado para Netscape habría sido absolutamente defraudador, con un texto que se activa cuando pasa el ratón distinto del visualizado por defecto. En MsIe, por el contrario, el efecto sería idéntico.


  Vuelve a principio de página
1997-2000 - Grafica, layout e guide sono de esclusiva proprietà de HTMLpoint s.r.l.