Instala un efecto de enlaces sacudidos

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

 

Uno de los efectos que podemos aprovechar de Prototype y Scriptaculous es el efecto shake, o sea de sacudido.
El efecto de sacudido es un efecto que al hacer click sobre un enlace o elemento éste se sacude de un lado a otro.

CLICK AQUÍ

Para poner este efecto en tus enlaces sigue estos sencillos pasos:
Antes de </head> lo siguiente:

NOTA: Si ya tuvieras Prototipe y Scriptaculous en tu plantilla entonces sólo agrega lo que está en color verde.

<!-- Prototype y Scriptaculous-->
< script src='http://www.google.com/jsapi'></script>
< script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
< /script>
< !-- Prototype y Scriptaculous-->
<script type='text/javascript'>

function ShakeEffect(element){
new Effect.Shake(element);
}

< /script>

Por último en tus enlaces usa este código para que se aplique el efecto, por ejemplo en un enlace con una imagen el código sería este:

<div onclick="ShakeEffect(this);">
< a id="shake1" href="URL del enlace"><img src="URL de la imagen"/></a>
< /div>

En un enlace de texto el código sería este:

<div onclick="ShakeEffect(this);">
< a id="shake2" href="URL del enlace">Texto del enlace</a>
< /div>

Cambia la URL del enlace y la URL de la imagen donde se indica en color rojo.
Si quisieras que este efecto se aplique no al hacer click sino cuando el cursor pasa por encima del enlace, entonces cambia lo que está en color azul por esto:

onmouseover

Si se lo aplicarás a más de una imagen o más de un enlace, entonces deberás cambiar el ID que está en negrita de manera que cada enlace o cada imagen tenga un ID distinto, puede ser la palabra que quieras, pero que todos sean diferentes entre sí.

Como ves es muy sencillo y es otra forma de aprovechar las librerías que casi todos usamos.