Enlace o imagen que desaparece al hacer clíck

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Enlace o imagen que se mueve y se esfuma al hacer clic

En el anterior post aprendimos a usar prototype y scriptaculous para hacer que la sidebar o barra lateral del blog pudiese arrastrarse hasta una posición deseada.

Con este otro truco, y haciendo uso de los mismos scripts, conseguiremos un efecto magnífico para los enlaces o las imágenes en el blog.

Puedes ver el resultado haciendo clic sobre las siguientes imágenes...

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta y añade estos scripts encima:

<script src='http://sites.google.com/site/scriptsbalcon/b/blconfigtext.js' type='text/javascript'/>
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

<script type='text/javascript'>
function PuffEffect(element){
new Effect.Puff(element, {duration:3});
}
function ShowImage(element){
new Effect.Appear(element,{duration:1, from:1, to:1.0});
}
</script>

Las líneas resaltadas en color gris son los scripts de prototype y scriptaculous usados ya en varios trucos. Si están en tu plantilla, no es necesario que los agregues de nuevo.

Ahora guarda la plantilla.

Dirígete a una entrada cualquiera para probar el efecto con una imagen o un enlace...

1) Con imagen

Utiliza este código cada vez que desees insertarle el efecto a una imagen:

<div id="myimage" onclick="PuffEffect(this);">
<img style="cursor: pointer;" src="URL DE TU IMAGEN"/></div>

Reemplaza URL DE TU IMAGEN por la dirección de tu imagen o icono.

2) Con enlace

Utiliza este código cada vez que desees insertarle el efecto a un enlace:

<div id="myimage" onclick="PuffEffect(this);"><a href="DIRECCION">TITULO</a></div>

Reemplaza DIRECCION por la url o dirección de la página web o el blog, así como TITULO por el texto que llevará el enlace.

3) Con imagen y enlace

<div id="myimage" onclick="PuffEffect(this);">
<a href="DIRECCION"><img style="cursor: pointer;" src="URL DE TU IMAGEN" /></a>
</div>

Los códigos pueden utilizarse tanto en las entradas del blog como en los elementos de página o gadgets html-javascript que encontrarás en el apartado de Diseño.

Nota:

Para no estar copiando los códigos que insertan las imágenes o los enlaces con el efecto, haz uso de la plantilla de entrada que ofrece blogger.