Ampliar imágenes de manera sencilla

Ampliar imagenes de manera sencilla

Buenas, ahora con otro tutorial retomando el script, este es un script sencillo creado por CodeLifter que permite implementar un zoom sencillo sobre cualquier imagen para aumentar el tamaño de esta con un clic y revertirlo con otro.

Para usarlo, debemos incluir el siguiente código antes de </head>:

<script type='text/javascript'> //<![CDATA[ var nW,nH,oH,oW; function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){ oW=whichImage.style.width;oH=whichImage.style.height; if((oW==iWideLarge)||(oH==iHighLarge)){ nW=iWideSmall;nH=iHighSmall; }else{ nW=iWideLarge;nH=iHighLarge; } whichImage.style.width=nW;whichImage.style.height=nH; } //]]> </script>

Para finalizar, lo agregamos en cualquier imagen con los siguientes datos html:

<img src="URL_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">

Esta función puede usarse en cualquier imagen y en varias en la misma página.

Ahora bien lo común es que ancho1 y alto1 sean los mismos en los atributos de la imagen que en la función, nada impide que sean diferentes.

¿Te gusto el tutorial? → Siguenos en nuestras redes sociales para más!. 

Comentar es Agradecer.

¡Compártelo!

Tweet