Aumenta las imágenes que agregas al pasar el cursor con efecto deslizante

Existen demasiados métodos para expandir una imagen al pasar el cursor, uno de ellos es Expando, del cual hablaremos hoy en esta entrada. Expando es un script que permite que la imagen se aumente a su tamaño real con un efecto deslizante, y al quitar el cursor de la imagen volverá a su tamaño pequeño, también con el mismo efecto.

Puedes ver el efecto pasando el cursor por la siguiente imagen:

Para lograr el efecto anterior en las imágenes de tu blog, entra a Diseño > Edición de HTML y antes de </head> añade lo siguiente:

<script type='text/javascript'> 

//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer

as first seen in http://www.dynamicdrive.com/forums/

username: jscheuer1 - This Notice Must Remain for Legal Use

*/

if (document.images){

(function(){

var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;

var expConIm = function(im){

im = im || window.event;

if (!expConIm.r.test (im.className))

im = im.target || im.srcElement || null;

if (!im || !expConIm.r.test (im.className))

return;

var e = expConIm,

widthHeight = function(dim){

return dim[0] * cos + dim[1] + 'px';

},

resize = function(){

cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;

im.style.width = widthHeight (e.ims[i].w);

im.style.height = widthHeight (e.ims[i].h);

if (e.ims[i].d && times > e.ims[i].jump){

++e.ims[i].jump;

e.ims[i].timer = setTimeout(resize, speed);

} else if (!e.ims[i].d && e.ims[i].jump > 0){

--e.ims[i].jump;

e.ims[i].timer = setTimeout(resize, speed);

}

}, d = document.images, i = d.length - 1;

for (i; i > -1; --i)

if(d[i] == im) break;

i = i + im.src;

if (!e.ims[i]){

im.title = '';

e.ims[i] = {im : new Image(), jump : 0};

e.ims[i].im.onload = function(){

e.ims[i].w = [e.ims[i].im.width - im.width, im.width];

e.ims[i].h = [e.ims[i].im.height - im.height, im.height];

e (im);

};

e.ims[i].im.src = im.src;

return;

}

if (e.ims[i].timer) clearTimeout(e.ims[i].timer);

e.ims[i].d = !e.ims[i].d;

resize ();

};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){

document.addEventListener('mouseover', expConIm, false);

document.addEventListener('mouseout', expConIm, false);

}

else if (document.attachEvent){

document.attachEvent('onmouseover', expConIm);

document.attachEvent('onmouseout', expConIm);

}

})();

}

//]]>

</script>

<style>

img.expando{

margin:10px;

vertical-align: top;

}

</style>

Después de añadir lo anterior, para que las imágenes en tus entradas tengan el efecto, sólo tienes que añadirlas con el siguiente código:

<img border="0" src="Url de la imagen" class="expando" width="100" /> 

Reemplaza Url de la imagen por la url de la imagen que querrás que tenga el efecto y el 100 significa los pixeles de ancho que tendrá la imagen en miniatura.

Entradas relacionadas con imagen

LinkWithin que permite, a través de un widget, enlazar entradas antiguas que guarden relación con una nueva entrada publicada, el cual incrementa el número de visitas y aumenta la estancia de un visitante en tu blog.
El widget dispone de la imagen en miniatura que contenga la entrada, es gratuito y muy fácil de instalar.


Para instalarlo tenemos que hacer lo siguiente:


1. Ingresar a la página de LinkWithin y a la derecha veremos un pequeño formulario el cual llenaremos para obtener el widget.

Si el blog tiene fondo oscuro en las entradas, tienes que marcar My blog has light text on a dark background.

2. Después de llenar todos los cambios, has clic en Get Widget!.

3. Después de hacer clic ahí, se abrirá una página en la que se muestran las instrucciones sobre cómo instalarlo en la plataforma seleccionada.

Y ya, eso es todo, como había escrito antes, un widget muy fácil de instalar.