Lo que deseo hacer es una caja de seleccion de colores, lo de los colores no es problema, el problema son los ventos de la caja
De principio tengo un div que quiero que aparezca haciendo clik en un boton o con la funcion onClick.
el problema viene cuando quiero hacer que desaparezca, he usado onmouseout pero desaparece cuando por ejemplo muevo dentro de la caja donde estan los colores, y cuando uso onblur para que desaparezca por ejemplo al hacer clik en cualquier lugar de la pagina.
Lo que he hecho es lo siguiente,practicamente es un menu, lo que hace es que al hacer clik en el boton se muestra la caja de colores, y quiero que al hacer clik en cualquier otra parte desaparezca, cosa que no hace
imagino que me diran que use onblur, pero cuando lo hago y presiono por ejemplo el el primer boton, la caja desaparece y no hace nada mas.
En mi ejemplo les dejo como sería con onBlur y con un boton que es el primero que da una alerta si es que se le ha presionado. Por el contrario si no uso onblur no cierra la caja si clikeo en cualquiwer otro lugar.
Aqui les dejo los codigos
Código :
<html>
<head>
<script type="text/JavaScript">
function caja_focus()
{
caja.style.visibility="visible";
//caja.focus();
}
function caja_blur()
{
caja.style.visibility="hidden";
}
function clikea()
{
alert('ha hecho clik');
caja_blur()
}
</script>
<style>
#caja{
background-color:#FFFFCC;
position:absolute;
visibility:hidden;
width: 92px;
height: 56px;
z-index:0;
}
#caja{
background-color:#FFFFCC;
position:absolute;
visibility:hidden;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div onClick="caja_focus()" style="width:100%; height:100%;" onBlur="caja_blur();">BOTON</div>
<div id="caja">
<table>
<tr>
<td onClick="clikea()">uno</td>
<td>uno</td>
<td onClick="caja_blur();">X</td>
</tr>
<tr>
<td>uno</td>
<td>uno</td>
<td>uno</td>
</tr>
</table>
</div>
</td>
<td>
<div>BOTON</div>
<div id="caja2">
<table>
<tr>
<td>uno</td>
<td>uno</td>
<td>uno</td>
</tr>
<tr>
<td>uno</td>
<td>uno</td>
<td>uno</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html> 