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.

Efecto desvanecer y aparecer en imágenes al pasar el cursor

Con anterioridad vimos cómo darle un efecto de opacidad a las imágenes al pasar el cursor, para ello incluíamos dentro del código de la imagen los estilos necesarios para generar la opacidad. El efecto descavenecer o aparecer que se explica en esta entrada no es muy diferente al ya comentado pero posee una nueva característica. Al pasar el cursor sobre la imagen, ésta se desvanece o aclara suavemente.

A continuación puede verse el truco en funcionamiento:


El resultado presenta dos variantes del efecto. La primera tira de imágenes aparece con un grado de opacidad de 0.5 que produce la aparición de la imagen al pasar el cursor; la segunda tira, por el contrario, no presenta opacidad sino que se las imágenes se desvanecen al pasar el cursor.

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



Localizamos la etiqueta </head> y justo antes insertamos uno de los siguientes bloques, dependiendo de la variante escogida y la presentación deseada:

Para el efecto aparecer al pasar el cursor en todas las imágenes del blog:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en todas las imágenes del blog:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Para el efecto aparecer al pasar el cursor en las imágenes escogidas:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImagjtef').fadeTo('slow', 0.5);
$('.blImagjtef').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en las imágenes escogidas:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImaggjtef').fadeTo('slow', 1.0);
$('.blImaggjtef').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Los dos últimos códigos, al contrario que los dos primeros (que al guardar la plantilla aplicarán el efecto a todas las imágenes), se aplican de forma manual, utilizando las clases resaltadas en color rojo (respectivamente), dentro del código de la imagen:
<img class='blImagjtef' src='URL DE LA IMAGEN'/>

<img class='blImaggjtef' src='URL DE LA IMAGEN'/>

En donde dice URL DE LA IMAGEN incluiremos la dirección de la fotografía o imagen.

El truco usa jQuery por lo tanto, si hemos instalado Scriptaculous, Prototype o Mootools seguramente no pueda utilizarse.

Con esto habremos terminado la instalación de este elegante efecto.

Maite Garrido dice...

Muy interesante este truco. Se parece al que nos enseñaste hace tiempo, el de lazyload que ayudaba a cargar el contenido del blog. Voy haber que tal queda en mi pagina. Un saludo!

runni dice...

Woow! Con lo fácil que es de poner y lo bien que queda! Un saludo desde Barcelona.

ikado art dice...

gracias por el truco, tiene una pinta estupenda.
sólo una cosa, creo que el código para la versión "desvanecer en todas las imágenes" puede estar equivocado... o al menos es exactamente igual al de "desvanecer en las escogidas"...

Anónimo dice...

buenisimo!
facilisimo!!

Unknown dice...

hola men tengo una pequeña consulta, sucede que le puse un generador de palabras claves en mi blog http://querubinb.blogspot.com/ por ejemplo dependiendo al titulo de post se agregan automaticamente encima del titulo del post, pero quiero que esas palabras solo aparezcan en los post individuales y no en la pagina principal yo pongo el codigo justo despues de



¿Lo hago mal? ¿cual es la ubicación correcta?

Jaime Trujillo Escobedo dice...

David, necesito la dirección del tutorial que utilizaste para implementar dicha característica. Sin ver el código que lo hace funcionar dudo que pueda ayudarte.

Anónimo dice...

como podria poner lo de los seguidores usando uno de estos widgets??

Jaime Trujillo Escobedo dice...

¡Qué bueno que os guste el efecto, Maite Garrido y Runni! Ahora toca disfrutarlo.

Jaime Trujillo Escobedo dice...

Muchas gracias por el aviso, Ricardo. Ya he modificado el término necesario y funciona sin problemas ;).

Jaime Trujillo Escobedo dice...

Edu, para aplicar el efecto opacidad al gadget de seguidores accede a esta entrada. Los pasos a seguir se han citado en el comentario número 14.

Laube Leal dice...

Jaime, leo que dejas de escribir en el blog??? Ayyyyy, por favor, qué penita, aunque entiendo que probablemente te quite mucho tiempo y en tus estudios tienes que apretar.
Espero que no sea por otra razón.
Te deseo lo mejor de mundo, porque me has ayudado tantísimo... Por ello te doy las gracias, de corazón, y un gran abrazo. Que todo te vaya bien.
Un besote guapetón. Cuídate mucho y pásate de vez en cuando a visitarme, vale???

Anónimo dice...

i loved you, thaans for all tips beginhg blogger using me, bye

Anónimo dice...

gracias!!

Davideomusic73 dice...

GRACIAS POR ESTE BLOG:ERES UN GENIO Y TU GENEROSIDAD ES GRANDE, YO, MAS VETERANO PERO CON POCO CONOCIMIENTO, PROCURO COMPARTIR EN MI BLOG PELIS VIEJAS DE MI COLECC VHS Y MUSICA 80'S Y LO HE DEJADO MUY GUAY GRACIAS A TÍ.
mi blog es
en un gadeget de la derecha esta tu nombre de 'el balcon
abrazos!"!!!

Anónimo dice...

Hola Jaime.

Veo que finalizas tu etapa de blogger. ¿Estarías dispuesto a vender el blog?

Tendría que conocer sus estadísticas, pero me interesaría continuar con tu trabajo.

Te dejo mi email: btwitter7 (at) gmail (dot) com

Gracias, un saludo,

Juanma

Guido dice...

:( :(( :((( :(((( por que terminaste el balcon justo hoy!! por que lo tenÍAS QUE TERMINAR!!?? no lo tenías que terminaaaarrr!!!!!! quee pasooo!!?

Fermín Gélvez Caballero dice...

Amigo, lastima que personas como y rosa del balcón de rosa se hayan retirado, tu por voluntad propia y rosa por voluntad de Dios. Me inunda la tristeza, gracias por ayudarnos con estos proyectos. www.elrincontecnologico.com

Juan dice...

Gracias por todo.

Anónimo dice...

Gracias Amigo

Anónimo dice...

Bye jaime"

Adriana dice...

Jaime, qué pena:( pena hayas decidido decirle adiós a la etapa bloguera. Ignorante en muchas cuestiones de html y demases, has logrado con tus claras explicaciones , ser una gran ayuda para mí;).
Gracias por todo!
Adriana

Jaz dice...

Muy bueno !!! ya lo he aplicado.

Unknown dice...

WOOW MUCHISISMAS GRACIAS ME GUSTO MUCHO Y Q GENIAL Y MUCHAS GRACIAS POR COMPARTIR LA ETIQUETA ^^ ANDATE MUY BONITU.u

Hamlet Arias dice...

Te extrañamos Jaime Regresa!!!!

BGeek dice...

Deberías dejar el blog a alguien o postear tu plantilla que es excelente.

saludos.

Unknown dice...

Me eh sucrito a ti via feed, y recien leo que lo dejaste una lastima tan bien elaborado que esta este blog.

Danielllupi v6 dice...

Jaime, un abrazo por mi parte, y deseo que esta nueva estapa te vaya bien. Te he elegido blog de la semana, por que te lo mereces y por muchas más razones. Mira la entrada especial que he hecho en mi blog dedicado a tí y a tu blog en: http://danielllupiv6.blogspot.com/2011/11/nos-despedimos-de-el-balcon-de-jaime.html

Danielllupi v6 dice...

Hola Jaime, he elegido a tu blog "Blog de la semana" siento no habertelo podido decir el Lunes, estaba muy liado. Espero que te guste la despedida que te he dedicado en mi blog: http://danielllupiv6.blogspot.com/2011/11/nos-despedimos-de-el-balcon-de-jaime.html

Un saludo Jaime, espero que este blog permanezca en nuestros recuerdos,
Dani.

Anónimo dice...

Hoy he entrado en el blog que acabo de rocomendar a mi nieta-sobrina. Y me he llevado una triste sorpresa al ver cómo has terminado el blog.
Yo llevo un blog en mi cole y al principio no tenía ni idea como se hacía, pero encontré el tuyo buscando por internet y me solucionaste muchas cosas y mi blog con tu ayuda se veía cada vez más bonito. Gracias y espero que tengas mucha suerte en tu nueva andadura.

mikeyla_17ka dice...

sos un genio!!!!!:D

Galena dice...

Muchas gracias por este truco!!

Unknown dice...

Muchas gracias Jaime por tu ayuda prestada, espero que tengas suerte en tu nueva etapa de vida. Un abrazo.~~

friv dice...

publicar gracias a usted mucho, muy buen artículo que lo necesito Gracias por el post. Agradezco la información sobre los comentarios del blog y seguramente va a empezar a buscar a las personas que están usando programas automatizados para hacer publicaciones en el blog de ​​comentarios.

Carolina dice...

Es triste que te hayas ido.

Jesús Dugarte dice...

lastima que blogs como este sean abandonado, Jaime espero y leas esto bloggers como tu hacen falta sobre todo por sus aportes.

Gabino dice...

Gracias amigo me fue de gran ayuda

hrhr dice...

Porque no seguiste el blog Jaime?

Anthony Martinez dice...

Que Lastima que te hallas retirado, haces mucha falta,y aunque casi nunca comentaba nada, hoy tengo que decir Gracias,

Alquiler de Fincas dice...

Gran el post el que has logrado conformado, admirable tu trabajo.

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