3 de agosto de 2012

Aumentar el tamaño de las imágenes al pasar el cursor encima - Efecto Expando


Bien, esto es posible con el  Expando. Esto es un script que permite que la imagen aumente a su tamaño real con un efecto deslizante, y al quitar el cursor la imagen regresa al tamaño pequeño, también con el mismo efecto. Es decir, nosotros pondríamos una foto en su tamaño original, lo que hace Expando es reducirla a un tamaño pequeño, pero, cuando se pasa el cursor por encima, la imágen se ve en su tamaño real, es decir, grande.

Podés ver un ejemplo pasando el cursor por esta imágen:




Para hacer esto entonces, vamos primero a Edición HTML y agrega antes de </head> el script:


<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>




Y después, sea en tus entradas o donde quieras poner esta imágen con efecto Expando colocamos lo siguiente:


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

Donde está lo de color rojo colamos el URL de la imágen que queramos que tenga tal efecto. Aclración importante, la imágen que vamos a poner en este espacio para el URL es la que tiene el tamaño original, el tamaño grande, es decir, así va a quedar cuando se expanda.
En color azul vamos a poner el tamaño de la imágen en miniatura.

Bueno, muy sencillo, espero que les guste, en lo personal, me parece genial! Saludos!






colocar efecto expando en las imágenes de mi blog, cómo hago para pasar el cursor por una imágen y que se agrande, imágenes con efecto expando en mi blog, imágenes que se agranden al pasar el cursor con efecto deslizante, fotos con efecto expansor expando en blogger.

No hay comentarios:

Publicar un comentario