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.
El tráfico del blog es algo positivo pero, a veces, también preocupante. Y esque se dan casos en los que recibimos quizás demasiado tráfico por parte del buscador, lo que sólo da problemas.
Una fiesta que hoy en día se celebra a lo grande y que afortunadamente podemos difundir con algún que otro artilugio en el blog.
La primera línea del bloque es la librería
Esta es una forma de mostrar el estado del blog por medio de una imagen de carga. Si la página, por el motivo que sea se demora un poco en cargar, el lector podrá ver un icono en movimiento que desaparece al completar la carga de todo artilugio.
