Scrollovers: Links con scroll

Scrollovers en un script que permite agregar un efecto de scroll a tus enlaces HTML, todo ello utilizando un javascript y css para definir las propiedades de los dos estados del enlace. Puedes ver un ejemplo de su funcionamiento en scrollovers.html

scrollovers.gif

Veamos como se implementan los scrollovers, lo primero es descargar el script scrollovers.js, luego de ello adjuntamos el script a nuestra página de la siguiente forma.

  1. <script type="text/javascript" src="scrollovers.js"></script>

Lo siguiente es crear dos estilos en donde se definirán las propiedades de los dos estados del enlace, por ejemplo creamos un estilo con los dos estados en color rojo y azul.

[css]
/* estado normal */
a.scrollover {
color: #557AFF;
}
/* estado over */
a.scrollover em:first-line {
color: #FF5B3C;
}
[/css]

El tercer paso es aplicar este estilo a nuestros enlaces, esto es le asignamos el estilo creado y ademas le agregamos la propiedad type con valor igual a scrollover, de la siguiente forma:

  1. <a href="home.php" class="scrollover" type="scrollover">Home</a>

Sencillo de implementar y muy vistoso, si bien es cierto son llamativas al abusar de ellas puedes hacer lenta la visualización de las mismas. Por otro lado si eres usuario de Blogger y deseas implementar este script puedes leer Vagabundia para un análisis detallado.

Comentarios Total 2 comentarios


Lex-Ex
Publicado: 11/08/2007 9:22 pm

Gracias man, no me salio hasta ver tu tuto…
BYtES!

flasher
Publicado: 12/08/2007 7:40 am

el Jim lo maximo!!! :P esta genial!

saludos :D

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)