Tamaño imagenes

vankish_ru · #1 (**permalink**) 02/06/2013, 14:14

Hola, estoy haciendo una práctica, y la quiero perfeccionar un poco(es una chorrada), para hacerla un poco más eficiente.

Tengo una tabla con imágenes, y cuando cliqueo en una, la hago a 1024x768, y cuando cliqueo dos veces, a 100x100. Hasta ahí todo ok, pero cuando tengo una imagen grande, y cliqueo otra, quiero que esta primera me vuelva al tamaño original(100x100) y agrande la otra, pero no consigo hacer que funcione. Necesito ayuda please!!!

function ampliar(id){

var imagen=document.getElementById("imagen"+id);

imagen.style.width = '1024px';
imagen.style.height = '768px';

}

function restaurar(id){

comprobarTam();

var imagen=document.getElementById("imagen"+id);

imagen.style.width = '100px';
imagen.style.height = '100px';

}

function comprobarTam(){

var i;
var aux;
var imagen = document.getElementByTag("img"):

for(i in imagen){

aux=imagen[i];

if(aux.style.width='1024px'){

imagen.style.width = '100px';
imagen.style.height='100px';
//break for;
}
}

}

Muchas gracias

marlanga · #2 (**permalink**) 03/06/2013, 02:00

Pon una variable global iniciada a NULL apuntando a la última imagen que se hizo grande.

En la función que agranda las imágenes, utiliza esa variable para volver a poner la útima imagen utilizada a 100px, siempre que no sea NULL.

emprear · #3 (**permalink**) 03/06/2013, 23:42

Recorré las imágenes, y a menos que la imagen en el array se corresponda con el elemento "dobleclickeado", la restaurás, algo asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ampliar/restaurar imagen</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function ampliar(t){
var contenedor = document.getElementById('contiene_img');
var losImg = contenedor.getElementsByTagName('img');    
    for (i=0; i<losImg.length; i++) {
        if(losImg[i] == t){
        t.style.width = "1024px";
        t.style.height = "768px";
        }else{
        restaurar(losImg[i]);
        }
    }
}
 
function restaurar(im){
im.style.width = "100px";
im.style.height = "100px";
}
//]]>
</script>
 
</head>
<body>
<p id="contiene_img">
<img src="a.jpg" width="100" height="100" alt="" ondblclick="ampliar(this);" onclick="restaurar(this)"/><br />
<img src="b.jpg" width="100" height="100" alt="" ondblclick="ampliar(this);" onclick="restaurar(this)" /><br />
<img src="c.jpg" width="100" height="100" alt="" ondblclick="ampliar(this);" onclick="restaurar(this)" /><br />
</p>
</body>
</html>

Podés mejorarla utilizando addEventListener para agregar los eventos en forma dinámica, aqui, algunos ejemplos:
http://www.forosdelweb.com/f13/addev...2/#post4377485
Saludos

vankish_ru · #4 (**permalink**) 04/06/2013, 02:41

Muchas gracias tios!!