div que pase encima de input, radios, etc

chalchis · #1 (**permalink**) 30/08/2006, 00:51

Hola amigos tengo un div que aparece al dar click
en el boton del campo departamento mi pregunta
como le puedo hacer para que ese div pase por encima
de los campos de abajo input, etc

<html>
<head>
<script type="text/javascript">
function aparecer(obj)
{
cap=document.getElementById('capa');
cap.style.display=(obj.value=='<') ? 'block' : 'none';
obj.value=(obj.value=='<') ? '>' : '<';
}

function datosel(idep,desc)
{
document.forms.formulario.clavedep.value=idep;
document.forms.formulario.deptex.value=desc;
document.forms.formulario.lista.value="<";
aparecer('<')

}
</script>
</head>
<body>
<form name="formulario" method="POST" action="">
<input type="text" name="clavedep">
<table width="288" border="0" align="left" cellpadding="1" cellspacing="0">
<tr>
<td width="100" valign="top"><div align="right">Departamento:</div></td>
<td width="182"><input type="text" name="deptex">
<input name="lista" type="button" onClick="aparecer(this)" value="<" />
<div id="capa" style="display:none; width:170px; height:120px; overflow:auto">
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('1','Biblioteca Bocana')">
<td width="15">1</td>
<td width="279">Biblioteca Bocana</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('2','Biblioteca Reforma')">
<td>2</td>
<td>Biblioteca Reforma</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('3','Caja')">
<td>3</td>
<td>Caja</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('4','Comunicación y Publicidad')">
<td>4</td>
<td>Comunicación y Publicidad</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('5','Coordinación Administrativa Bocana')">
<td>5</td>
<td>Coordinación Administrativa Bocana</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('6','Coordinación Operaciones de Red')">
<td>6</td>
<td>Coordinación Operaciones de Red</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('7','Coordinación de Posgrados')">
<td>7</td>
<td>Coordinación de Posgrados</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('8','Desarrollo Sustentable')">
<td>8</td>
<td>Desarrollo Sustentable</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('9','Dirección de Sistemas')">
<td>9</td>
<td>Dirección de Sistemas</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('10','Dirección General')">
<td>10</td>
<td>Dirección General</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('11','Diseño')">
<td>11</td>
<td>Diseño</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('12','Finanzas')">
<td>12</td>
<td>Finanzas</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('13','Planeación Educativa')">
<td>13</td>
<td>Planeación Educativa</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('14','Promoción')">
<td>14</td>
<td>Promoción</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('15','Psicopedagógico')">
<td>15</td>
<td>Psicopedagógico</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('16','Rectoria')">
<td>16</td>
<td>Rectoria</td>
</tr>
<tr onmouseover=this.style.background="#FFFFCC" onmouseout=this.style.background="#FFFFFF" style="cursor:pointer" onClick="datosel('14','Servicios Escolares')">
<td>17</td>
<td>Servicios Escolares</td>
</tr>
</table>
</div> </td>
</tr>
<tr>
<td><div align="right">Campo2:</div></td>
<td><input type="text" name="textfield22"></td>
</tr>
<tr>
<td><div align="right">Campo3:</div></td>
<td><input type="text" name="textfield23"></td>
</tr>
<tr>
<td><div align="right">Campo4:</div></td>
<td><input type="text" name="textfield2"></td>
</tr>
</table>
</form>

</body>
</html>

saludos

espero sus comentarios

gracias

pinchoso · #2 (**permalink**) 30/08/2006, 00:59

Hola chalchis,

cambia el estilo del div:

<div id="capa" style="position:absolute;top:10px;left:20px;background:#F FFFFF;display:none; width:170px; height:120px; overflow:auto">

tal y como esta, si tuvieras algun campo select en tu formulario este se pondria por encima de la capa, para solucionar esto tienes dos opciones:

1- ocultar estos campos (document.getEle....().style.visibility='hidden')
2- poner un iframe del mismo tamaño de la capa por debajo de esta (solución propuesta por el_javi en un post de hace tiempo)

Saludos!

chalchis · #3 (**permalink**) 30/08/2006, 01:12

Esta genial solo tuve que acomodarlo donde debe ir y si tomare tu consejo
hare invisible usando display de css none o block por es cierto me topo con un select despues

saludos funciona bien

gracias

chalchis · #4 (**permalink**) 30/08/2006, 15:46

como podri ocultar el div id="capa" en caso de que el usuario diera click en otro campo o en alguna otra parte de la pagina se puedo usar onblur o mouse over el detalle es donde ponerselo a cada objeto que existe en la pagina para que esconda el div nuevamente

saludos
espero sus comentarios