Sei sulla pagina 1di 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

org/1999/xhtml"> <head> <script language="Javascript"> var temporizadorplegar; var temporizadordesplegar; function detectar (evt) { //evt, es una variable que se recibe implcitamente cuando se utiliza el modo // no invasivo de manejar eventos, pero en este caso se llama la // funcin detectar desde los botones, pasndole, el evento como tal var btnId = evt.target.id; //Por medio del evento, y haciendo referencia a la fuente que lo gener (botn) //utilizando la palabra reservada target, podemos saber el id switch (btnId) { case "r1": recoger("contenido"); break; case "d1": desplegar("contenido"); break; case "r2": recoger("contenido2"); break; case "d2": desplegar("contenido2"); break; } //Dependiendo del id, utilizamos un switch para llamar la funcin especfica //pasndole el nombre del div que queremos animar } function recoger(div){ clearTimeout(temporizadordesplegar); var altura=parseInt(document.getElementById(div).style.height); if (altura>0) { altura--; document.getElementById(div).style.height= altura+"px"; temporizadorplegar=setTimeout(recoger,10, div); //Esta es la sintaxis que reconocen firefox y google chrome, para pasar //parmetros a una funcin llamada con setTimeOut. No es obligatorio //poner el nombre de la funcin entre parntesis. La variable div, es //la que recibe el id del div que vamos a animar. } else { clearTimeout(temporizadorplegar); } } function desplegar(div){ clearTimeout(temporizadorplegar); var altura=parseInt(document.getElementById(div).style.height); if (altura < 305){ altura++; document.getElementById(div).style.height= altura+"px"; temporizadordesplegar=setTimeout(desplegar,10,div) ; } else { clearTimeout(temporizadordesplegar); }

} </script> </head> <body> <input type="button" id="r1" value="Recoger" onclick="detectar(event)" /> <input type="button" id="d1" value="Desplegar" onclick="detectar(event)" /> <!-- Una regla de html es que los id no se pueden repetir, cada id es nico como n uestro nmero de identificacin. Por eso le puse un id diferente a cada botn. Por ot ro lado, se llama la funcin detectar, pasndole como parmetro, el evento, explicado en el cdigo javascript anterior.--> <div id="contenido" style="width:720px; height:305px; background-color:#006699;" ></div> quiero que estos botones tambien puedan reutilizar la primera funcion pero no he podido, para hecer una funcion global alguien sabe como <br> <input type="button" id="r2" value="Recoger" onclick="detectar(event)" /> <input type="button" id="d2" value="Desplegar" onclick="detectar(event)" /> <div id="contenido2" style="width:720px; height:305px; background-color: #CC0000 ;"></div> </body> </html>

Potrebbero piacerti anche