Bienvenida

BIENVENIDO A FAMAG KIRADOBER,

Ultimas Entradas

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

by - lunes, enero 23, 2017

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 tenemos que seguir unos simples pasos:
Vamos a "Plantilla" 
                                                                
Abre "Editar HTLM" 
                                                               

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código. </head>

Una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo antes del código que encontraste
<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 Azul 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,


Fuente; hogarblogger

Fecha:23/01/2017

Publicado por:




Calificación:

You May Also Like

0 comentarios

Paginacion