
07/05/2009, 01:05
|
 | Moderador extraterrestre | | Fecha de Ingreso: diciembre-2001 Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años, 2 meses Puntos: 61 | |
Respuesta: Deshabilitar DIV con un checkbox Es esto lo que quieres?
Código javascript :
Ver original<html> <head> <title>Prueba</title> <script> antigua=""; function obj(x){ return document.getElementById(x) } function mostrar(nombreCapa,esto){ if(esto.title!="off"){ if(antigua!="" && antigua!=nombreCapa){ ocultar(antigua); } obj(nombreCapa).style.display="block"; antigua=nombreCapa } } function ocultar(nombreCapa){ obj(nombreCapa).style.display="none"; } function mostrartodas(){ mostrar('capa1',obj('res')) mostrar('capa2',obj('acu')) mostrar('capa3',obj('int')) mostrar('capa4',obj('ind')) } function ocultartodas(){ ocultar('capa1') ocultar('capa2') ocultar('capa3') ocultar('capa4') } function habilitar(queHacer,aqui,donde){ obj(aqui).title=(queHacer)?"on":"off"; if(!queHacer){ obj(donde).style.display="none" } } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><p><a href="#" onClick="mostrartodas();return false">Ver todas las capas</a></p> </td> </tr> </table> <p> <input name="box1" type="checkbox" onclick="habilitar(this.checked,'res','capa1')" /> Responsability <br> <input name="box2" type="checkbox" onclick="habilitar(this.checked,'acu','capa2')" /> Accuracy <br> <input name="box3" type="checkbox" onclick="habilitar(this.checked,'int','capa3')" /> Integrity <br> <input name="box4" type="checkbox" onclick="habilitar(this.checked,'ind','capa4')" /> Independence</p> <div style="position:absolute; margin-top:80px; left: 29px; top: 107px; width: 79px; border:thin #000000" align="right"> <a id="res" href="#" title="off" onClick="javascript:mostrar('capa1',this);return false" >RESPONSABILTY</a> </div> <div style="position:absolute; margin-top:80px; left: 176px; top: 113px; width: 79px;" align="right"> <a id="acu" href="#" title="off" onClick="javascript:mostrar('capa2',this);return false">ACCURACY</a> </div> <div style="position:absolute; margin-top:80px; left: 275px; top: 113px; width: 79px;" align="right"> <a id="int" href="#" title="off" onClick="javascript:mostrar('capa3',this);return false">INTEGRITY</a> </div> <div style="position:absolute; margin-top:80px; left: 377px; top: 113px; width: 79px;" align="right"> <a id="ind" href="#" title="off" onClick="javascript:mostrar('capa4',this);return false">INDEPENDENCE</a> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p><br> <br> <br> <br> <br> </p> <p> </p> <p> </p> <p> </p> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="#" onClick="javascript:ocultartodas('capa1','capa2','capa3');">Cerrar todas las capas</a></td> </tr> </table> <p> </p> <div id="capa1" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 38px; top: 230px; z-index: 15; display:none" align="center" top-margin="100px"> <p> </p> <p> </p> <p align="center"> CAPA 1 </p> </div> <div id="capa2" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:414px; height:204px; position:absolute; left: 38px; top: 230px; z-index: 10; display:none" align="center" top-margin="100px"> <p> </p> <p> </p> <p align="center"> CAPA 2 </p> </div> <div id="capa3" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 5; display:none" align="center" top-margin="100px"> <p> </p> <p> </p> <p align="center"> CAPA 3 </p> </div> <div id="capa4" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 0; display:none" align="center" top-margin="100px"> <p> </p> <p> </p> <p align="center"> CAPA 4 </p> </div> </body> </html>
Confío en que te sirva! He cambiado un par de cosas de tu código, pero he intentado respetar el espíritu (y que funcione, claro!).
Un saludo!
__________________ Cómo escribir
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |