Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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...



script.aculo.us

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.

Gra dice...

Hola Jaime!!!!
Estuve con la compu quemada y cuando vuelvo veo muchisimos trucos espectaculares !!! Que maravilla!!!!
Este me gusta mucho hasta para hacer como un cartel de advertencia , sólo le agregaria debajo dentro de la imagen, "hacer click para cerrar", no?
Saludos!!!

Jaime Trujillo Escobedo dice...

¡Bienvenida otra vez, Gra!

Así es, bastará con escribir una frase justo debajo de la imagen (o reemplazar ésta por texto en caso de no querer mostrar un icono) ;).

¡Abrazos!

Analía Alvado dice...

Hola Jaime, quiero probar este efecto, pero antes pregunto:
Una vez que hice click en la imagen y se esfumó ¿dónde hago click para que regrese? ¿o no vuelve más?
¿No estarás haciendo magia vos, ah??

:D

Saludos garabatos!!

Jaime Trujillo Escobedo dice...

GARABATO, me temo que un poco de magia si que lleva este truco ^^ jajajaja.

Una vez hayas hecho clic sobre la imagen o el enlace, éste no podrá volverse a ver al no ser que la página se actualice.

¡Saludos Balconiles!

BiBliOpEquE dice...

GRACIAS JAIME... justo ahora necesito ese truco. estoy armando una casa embrujada ¡¡llena de fantasmas!!! cuando la termine te invito a jugar.

saludos y gracias otra vez

ah, soy un garabato

Jaime Trujillo Escobedo dice...

¡Será un honor, Los peque de la BiBlio! Este efecto va de maravilla con una imagen fantasmal.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo