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.

Cambiar imagen al pasar el cursor por encima de ella

Una imagen que cambia por otra al pasar el cursor sobre ella añade elegancia al blog y a su vez, puede atraer a los lectores. Para realizar el truco, simplemente necesitas dos imágenes y un sólo código.


Puedes ver un ejemplo del truco aquí:

Para agregarlo, bastará con incluir este código en el cuerpo de una entrada o en un gadget HTML/Javascript:

<img src="Url primera imagen" onmouseover="this.src='Url segunda imagen';" onmouseout="this.src='Url primera imagen';"/>

Reemplaza Url primer imagen por la dirección de la imagen que se mostrará por defecto y Url segunda imagen por la dirección de la imagen que se mostrará al pasar el cursor por encima de ella.

Ten en cuenta que al implementarlo en una entrada tendrás que hacerlo desde Edición de HTML y no desde Redactar. También tienes que tener en cuenta que mientras más parecido el tamaño de las imágenes los resultados serán mejor.