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

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


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.


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 Amarillo vamos a poner el tamaño de la imágen en miniatura que es como se vera cundo entreis en la pagina o la que es la imagen de referencia.



Fecha:24/12/2016

Publicado por:






Fuente: hogarblogger




Blogs Famag

No hay comentarios:

Publicar un comentario

Facebook

Related Posts Plugin for WordPress, Blogger...

AddToAny