Hola amigos de Ayudar Bloggers en este, mi tercer tutorial les voy a enseñar un truco, que a mi me parece muy bueno, expandir alguna imagen al pasar el cursor encima de ella, se puede hacer con css, pero yo les voy a enseñar a hacerlo mediante un script, para que solo copien y peguen los que aún no saben mucho de diseño, asi que empezemos (pon el cursor en la imagen para el demo).

Aumentar imagen

Bueno, ya vieron el Demo, aasi que ustedes ahora deciden si lo agregan o no, y si decidieron que si, hagan lo siguiente, primer se van a Plantilla – Editar HTML, ahi buscan:

</head>

Justo arriba de esa linea, agregan el siguiente codigo javascript:

<script type=’text/javascript’>
//<![CDATA[
/* Inicio Expandir imagen
*/
if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 10 : 20, speed = a? 10 : 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>

Listo, ya tiene el script, guardan la plantilla, se van a alguna post, o donde quieran que se expanda la imagen, y agregan el siguiente codigo:

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

Ya tienen tambien el codigo para la imagen, solo cambian URL de la imagen por la url de su imagen, el anho por default sera 100, asi que si quieren lo pueden cambiar tambien, recuerden que la imagen debe ser un poco mas grande de el ancho que seleccionaron, ya que si no, la imagen si pixeleara, bueno es es todo en este tutorial, espero que les sirva, y me sigan visitando, ya que esto apenas empieza.