sábado, 24 de septiembre de 2011

Imágenes con efecto desvanecer o aclarar


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 ScriptaculousPrototype o Mootools seguramente no pueda utilizarse.

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

4 comentarios:

Ladys Maza Santoya dijo...

no entiendo :(

SaKu-Chan dijo...

Holaaa busha yo entendi correctamente pero, lo que no entiendo es lo de la parte de las imagenes elegidas tengo muchas imagenes pero como las pongo todas para que el efecto quede en ellas?

puse el efecto numero dos pero me quedo en todas las imagenes incluyendo afiliados y imagenes de la entrada, las que quiero que se les vea el efecto es solo las iamgenes de entrada entonces como deberia quedar el codigo?

Silvia dijo...

hola
gracias por la informacion
voy a probarlo y a ver si me funciona :P
besosss

Silvia dijo...

funciono perfecto!!
^^

Publicar un comentario en la entrada

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones