junio 29, 2009

Agrandar imagenes con un CLICK

No sólo yo; muchos hemos conseguído páginas web donde, haciendo click sobre una imágen, esta agranda su tamaño dos , tres, o mas veces en relación a la imágen original que estamos viendo. Para lograr éste efecto sólo debemos seguír los pasos siguientes:
Colocar el siguiente código encima de </head>




<script type='text/javascript'>

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>




Una vez colocado el código en nuestra plantilla, sólo nos queda el ponerlo en funcionamiento y esto lo hacemos con este otro código, que utilizaremos al momento de implementar el efecto.



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












Donde está la información ancho 1 y alto 1, debemos colocar el valor original de la imágen. En ancho 2 y alto 2 colocaremos el valor al cual se va a ver la imágen: yo le he puesto el doble de la medida original.







1 comentarios:

  • 2 de diciembre de 2009, 20:14
    Juanga Comenta:

    buenisimo ;) como haces lo de los copos de nieve?

    delete

Publicar un comentario

Bienvenido, eres libre de expresar tus opiniones.
Para mi no existen comentarios negativos, todos
son positivos porque nos dejan una enseñanza.

Si necesitas contactar conmigo puedes hacerlo a
través de: mitesterlab@gmail.com

 

Mi laboratorio de pruebas Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger