Aprende a agrandar tus imágenes pasando el puntero por encima

Hoy os traigo, una vez mas, otro tutorial de personalización para vuestros blogs. Esta vez se trata de "Expando", un script que hará que cualquier imagen que vosotros queráis de vuestro blog aumente su tamaño con un efecto deslizante realmente simple y bonito, y al quitar el cursor la imagen recuperara su tamaño original también con el mismo efecto. Esto nos permitirá crear entradas con montones de imágenes en forma de galería y que quede todo bien ordenado y agradable a la vista.

Para ver como quedaría este efecto en una entrada podéis entrar en mi blog de pruebas pinchando en la imagen de la entrada.

Si te ha gustado y lo quieres en tu blog, lo que tendrás que hacer sera:
- Entrar en la edición del código HTML de tu blog (en la pestaña plantilla).
- Una vez allí buscar la palabra </head>.
- Cuando la tengas localizada, añades el siguiente código justo antes.

<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 ya estaría casi terminado, ahora lo único que tendrás que hacer para insertar una imagen con estas características sería utilizar este código (Que pegaremos en el apartado HTML de nuestra entrada y no en el apartado ''Redactar'')

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

Y por último, sustituir URL de la imagen  por la dirección a la imagen que vosotros queráis y el 100 por el tamaño que le queráis dar a la miniatura de vuestra imagen. Así de fácil, ya tendremos este efecto en nuestro blog.

Espero que os haya gustado y no dudéis en comentar si tenéis alguna duda.

Un saludo