lunes, 10 de enero de 2011

Efecto deslizante en un link de texto o imagen

Para este efecto hay que tener las librerías Prototype y Scriptaculous.

Si no la tenemos. Vamos a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script>

google.load(&quot;prototype&quot;, &quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Después para darle el efecto solo agregar la siguiente línea a los link:

onMouseOver='new Effect.Shake(this, {distance:10, duration:1.5});'

Pueden modificar la distancia (distance:10) y duración (duration:1.5) del efecto.


Ejemplo en link de texto:

<a href='http://.....URL......com/' onMouseOver='new Effect.Shake(this, {distance:10, duration:1.5});'>LINK</a>


Ejemplo en link de una imagen:

<a href='http://.....URL......com/' onMouseOver='new Effect.Shake(this, {distance:10, duration:1.5});'><img src="URL IMAGEN"/></a>


Si tienen la librería llamada jQuery no utilizar Scriptaculous ni este efecto.

No hay comentarios:

Publicar un comentario