16/4/12

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.

No hay comentarios:

Publicar un comentario