Uno de los trucos que más me gusta es éste que da un efecto de
opacidad (desvanecimiento) a las imágenes que tenemos en el blog. Además de ser
sencillo de implementar, hace que nuestro blog luzca elegante.
Puedes ver el truco en funcionamiento en este blog de pruebas.
Para darle ese efecto de opacidad a las imágenes de las
entradas del blog, solo pega antes de </head> el siguiente código para las imagines seleccionadas:
<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>
<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>
Esto para las imágenes que pongas dentro de tu sidebar en un
gadget. Además, tendrás que agregar de forma manual la clase 'blImagjtef' dentro del código o url de las imágenes, de
modo que quede así:
<img class='blImagjtef' src='url-imagen'/>
Pero si quieres que todas las imágenes que pongas en las
entradas tengan este efecto, sin tener que recurrir a este proceso manual, además
de tedioso, en ese caso deberás poner este otro código:
<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>
<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>
Con esto, todas las imágenes de tu blog quedarán con ese
efecto de opacidad que le da cierto aire de profesionalismo, ¿no crees?
Un truco increoble =)
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarhola como estas... es genial
ResponderEliminarquisiera saber como hacer... puse los dos codigos... pero me gustaria saber como hago para que al pasar el cursor no se vuelvan opacas las imágenes si no al contrario.... que las imagenes queden opacas y al pasar el curso la imagen quede normal otra vez...
podrías decirme ? gracias
Daniel Vergara, gracias por visitar el blog. Tal vez lo que tú buscas esté en esta entrada de Ciudad Blogger http://ciudadblogger.com/2009/08/efecto-de-opacidad-en-las-imagenes.html
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar