.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Agrandar nuestras imágenes con JavaScript

15 feb 2019
Hoy vamosa mostraros como podemos agrandar una imagén usando JavaScript.






Nota:Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso

Insertar codigo
 Nos vamos a Tema > Editar HTML.
En nuestra plantilla buscamos </head>
Justo antes de este código incrustamos el siguiente código

<script type='text/javascript'>
// C.2004 by CodeLifter.com
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>


Guardamos y listo.
En la entrada en la edición HTML pegamos el siguiente código.



<img src="URL-DE-LA-IMAGEN" width="100" height="100" onclick="zoomToggle('100px','100px','200px','200px',this);">


img src="URL-DE-LA-IMAGEN" aquí colocamos la URL de la imagen que queremos que tenga el efecto zoom.
width="100" height="100" y '100px','100px','200px','200px' es el ancho y alto de la imagen antes y después de agrandar respectivamente; podemos cambiar las medidas a nuestras necesidades.

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos