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.
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>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</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:
<a href="URL del enlace" onclick="ShakeEffect(this);">
<img src="URL de la imagen" />
</a>En un enlace de texto el código sería este:
<a href="URL del enlace" onclick="ShakeEffect(this);">
Texto del enlace
</a>Cambia la URL del enlace y la URL de la imagen donde se indica en color azul.
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 rojo por esto:
onmouseoverComo ves es muy sencillo y es otra forma de aprovechar las librerías que casi todos usamos.
Es posible que en Google Chrome el efecto no funcione correctamente cuando se trata de más de un enlace, en Mozilla Firefox e Internet Explorer funciona sin problemas.












