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.
Para poner este efecto en tus enlaces sigue estos sencillos pasos:
Antes de </head> lo siguiente:
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.
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:
En un enlace de texto el código sería este:
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:
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.
<!-- 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.
Hace tiempo descubrimos un truco muy interesante que nos permitía mostrar las
Este truco permite que una o varias palabras determinadas contengan un enlace. Bastará con escribirlas en la entrada como si de texto normal se tratase para que, de forma automática, se conviertan en un vínculo hacia otra página.
