Scrollovers: unos enlaces muy originales

Este script ha aparecido como una novedad en varios sitios, entre otros, lo he visto en Cosas Sencillas. Se trata de Scrollovers, un efecto muy original para los enlaces.

ESTE ES UN EJEMPLO

OTRO EJEMPLO OTRO EJEMPLO OTRO EJEMPLO

Es muy simple de implementar y es compatible con la mayoría de los navegadores, Firefox, Internet Explorer, Opera pero, si lo vamos a utilizar en Blogger, es muy probable que nos encontremos con alguna dificultad.

Lo primero que debemos hacer es descargar el archivo scrollovers.js (eventualmente, también podemos enlazarlo) y lo incluimos dentro del HEAD de la plantilla, por ejemplo, justo antes de la etiqueta </head>.

Si queremos utilizar el archivo original, lo enlazamos directamente y agregamos:

<style type="text/css">
/* aquí incluiremos las definiciones de estilo del efecto */
</style>
<script type="text/javascript" src="http://www.scrollovers.com/js/scrollovers.js"></script>

Si lo descargamos y lo subimos a un servidor propio agregaremos:

<style type="text/css">
/* aquí incluiremos las definiciones de estilo del efecto */
</style>
<script type="text/javascript" src="URL/scrollovers.js"></script>

En ambos casos, deberemos incluir las definiciones de estilo de las clases que crearán el efecto. Básicamente son dos:

/* estilo del enlace normal */
a.scrollover {
color: #0CFFF5 !important; /* color del texto */
word-wrap: normal;
}
/* estilo del enlace over */
a.scrollover em:first-line {
color: #0C8AFF !important; /* color del texto */
}

Utilizando estos valores, ESTE ES EL RESULTADO que obtendremos.

Si se compara esto con el código original, se verán dos diferencias.

Primero, el agregado de la instrucción !important para forzar el cambio de estilo en los enlaces porque esas propiedades ya están establecidas en la plantilla y debemos hacer que estas, que las modifican, prevalezcan sobre aquellas.

Lo segundo es el agregado de la propiedad word-wrap. Esta, es una propiedad CSS exclusiva de Internet Explorer que establece si se corta una línea de texto cuando esta excede el ancho disponible. En las plantillas de Blogger, es usual que los bloques main-wrapper y sidebar-wrapper tengan establecida esta propiedad:

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

si no restablecemos esta propiedad a su valor normal, el efecto no se verá bien en Internet Explorer:
UN EJEMPLO

Para utilizarlo en muestro blog, empleamos la clase y el tipo en los enlaces donde queramos aplicar el efecto:

<a href="URL_enlace" class="scrollover" type="scrollover">
TEXTO DEL ENLACE
</a>

No es necesario tener un efecto único. Podemos crear todos los que queramos. Para esto, debemos utilizar clases diferentes, dándoles diferentes nombres. Por ejemplo:

a.scrollover_1 {color:#AAAAC0 !important; word-wrap: normal;}
a.scrollover_1 em:first-line {color:#00FF00 !important;}

a.scrollover_2 {color:#FF0000 !important; word-wrap:normal;}
a.scrollover_2 em:first-line {color:#8080C0 !important;}

SCROLLOVER 1
SCROLLOVER 2

Las propiedades de las clases pueden ampliarse, algunas serán útiles y otras habrá que probarlas en cada plantilla. Por lo general, podemos incluirlas en el estilo de enlace normal. Por ejemplo:

a.scrollover {
color: #000000 !important;
word-wrap: normal;
font-size: 1.2em; /* tamaño del texto */
font-family: Georgia; /* tipo de fuente */
background: transparent url(una_imagen) repeat-x; /* fondo */
padding: 2px 0 4px 5px; /* márgenes */
}
a.scrollover em:first-line {
color: #FFFFFF !important;
}

UNA CLASE ESPECIAL	Enlace 1 Enlace 2 Enlace 3 Enlace 4
Enlace 1 | Enlace 2 | Enlace 3 | Enlace 4 | Enlace 5 | Enlace 6

Me adelanto a alguna pregunta.

Si bien se dice que funciona en todos los navegadores, varias horas de intentos e idas y vueltas en Blogger hacen que tenga ciertas reservas. En Firefox no parece haber problemas .

En Internet Explorer las cosas son un poco complicadas y no tengo muchas respuestas. Todo lo que he podido hacer ha sido siempre laborioso, probando el tipo de fuente y el tamaño adecuados. Muchas veces, el texto se corta, queda un poco abajo, ocultándose un par de pixeles.

En Opera la cosa es peor, a veces funciona y a veces no.

Resumiendo: un efecto interesante pero hay que usarlo con cuidado, experimentar y encontrar los valores adecuados.