Kawaii Lai
Info. Afiliados stuff facebook twitter tumblr facebook ask.fm blogskin back
Sobre el Blog


Bienvenido a un mundo lleno de cositas Kawaii,tutoriales,recursos y imagenes!!! No olvides seguirnos para no perderte nada ♥

Chat



Seguidores

Opciones
Participar en este sitio
Miembros (35) Más »
¿Ya eres miembro? Iniciar sesión
-  
 | 
 
 ()
 ()
 
   
       
|
 ()
 ()





Aumenta tus imágenes al pasar el cursor por ellas
jueves, 7 de febrero de 2013 • 14:37 • 0 comments


Hola a todos en el post de hoy le compartiré un tutorial muy bueno para sus imágenes ademas es de esos que haces en menos de 5 minutos pero que te son muy útiles
Pueden ver como se ve el efecto pasando el cursor por la imagen de abajo



Vamos a ir a PlantillaEdicion HTML luego buscaremos el siguiente codigo </head> para encontrarlo mas rápido apriente " F3" o "Ctrl+F"

Antes del </head> pegamos el código que esta bajito:


<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 listo ahora esto es muy importante cuando queramos que este efecto se active agregaremos en nuestras entradas a donde lo queramos poner del blog este codigo:
<img border="0" src="URL de la imagen" class="expando" width="100" />

Recuerden que el url debe tener la imagen del tamaño original y en la parte azulita cambiaremos el 100 por el tamaño de la miniatura

El tuto es de este genial blog mucho credito :)



Etiquetas:



Older Post | Newer Post