Scrollovers Una manera distinta de mostrar tus enlaces

Publicado por InfectedFX el dia 5 Aug 2007 - Guardado en Ajax, Javascript Leido 2,060 Veces

Scrollovers

Este sitio me lo pasó alguien que ni blog tiene pero le pareció curiosa la forma en que se mostraban los enlaces y luego lo leí más a fondo en WebmasterLibre.

Se trata de un pequeño script que hace como si tus enlaces se movieran hacia arriba ó hacia abajo dependiendo el estado del mouse.

Para hacerlo funcionar hay que descargarse este script , ahora lo mandan llamar entre sus tags head

JavaScript:
<script type="text/javascript"
src="http://www.Tusitioweb.com/js/scrollovers.js"></script>

Por último solo hay que añadirle la clase y type scrollovers al enlace que deseemos que haga este efecto.

HTML:
<a href="http://www.xyberneticos.com/" class="scrollover"
type="scrollover">
Xyberneticos</a>

La clase es para la CSS que podemos definir el estado normal y al pasar por el mouse

CSS:
a.scrollover {
/* Default Colour/Styles here */
color: #AE00C2;
}
a.scrollover em:first-line {
/* Rollover Colour/Styles here */
color: #005D91;
}

Enlace | www.scrollovers.com - Articulo Publicado por InfectedFX colaborando con xyberneticos

Publicado por InfectedFX

InfectedFX ha publicado 4 posts en Xyberneticos - Leer todos mis articulos InfectedFX

  1. [...] deseas ver paso a paso como lograrlo, checate este enlace hacia [...]

  2. [...] Contact the Webmaster Link to Article ajax Scrollovers Una manera distinta de mostrar tus enlaces » Posted at [...]

  3. Joxmiguel - Gravatar

    Joxmiguel

    05-08-2007

    Permalink

    Muy interesante la manera de como por la clase em:first-line haga el cambio, oye se vio muy despectivo eso de "alguien que ni blog tiene", saludos y como siempre tu sitio es de visita super obligada diario.

  4. Chicoblog - Gravatar

    Chicoblog

    05-08-2007

    Permalink

    Es ideal!!

    Me pregunto, como se podra hacer una especie de efecto fade :o

    Saludos y esta genial!

  5. excelente!!!



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: