P.- ¿Como puedo poner sobre elementos SELECT, TEXTAREA de un formulario una capa, a estilo Tooltip?
R.- Tras varios días de estudio, he llegado a la forma de conseguirlo.
Poder poner una capa sobre un formulario, y que en IE, NO SE OCULTE TRAS LOS ELEMENTOS SELECT Y TEXTAREA.
Bueno, pues hay una manera de solucionarlo.
Quizás, no sea la manera más profesional pero por el momento, es la que mejor sirve para salir del paso.
Os comento la lógica, y después paso el código:
Como el problema es que la capa (DIV) se pasa a segundo plano, detras del SELECT o TEXTAREA, pues hay que encontrar un OBJETO que SI quede por encima de dichos elementos.
¿Y si usamos un IFRAME, que esté continuamente detras de la capa, y que el iframe este sin bordes, e invisible?
Pues es la mejor solución que hasta el momento e encontrado.
Si, un IFRAME, detras siempre de la capa, para que haga de TAPADERA sobre el SELECT o TEXTAREA.
A continuación os pongo el código:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Capa sobre Formulario</title>
<style type="text/css">
.sp{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1px;text-decoration:none;color: #EFEFEF;line-height:1px}
</style>
<script language="JavaScript1.2" type="text/javascript">
// Función encargada de desplazar la capa por el documento
function desplazar_capa(evt)
{
// Capturamos el Evento
var e = (window.event) ? window.event : evt;
// Instanciamos los dos objetos
var capa = document.getElementById("capa");
var obj_iframe_oculto = document.getElementById("iframe_oculto");
// Determinamos las coordenadas del raton.
X = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
Y = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
// Mostramos las coordenadas del raton por pantalla
document.getElementById("info").innerHTML = "X= " + X + " Y = " + Y;
// Movemos la capa a las coordenadas del raton
capa.style.left = X + 10;
capa.style.top = Y + 25;
// Ponemos a nuestra capa una opacidad para que sea algo transparente y se vea el contenido del fondo
capa.style.filter="alpha(opacity=85)"; // Opacidad para IE
capa.style.opacity="0.85"; // Ocapacidad para Netscape
// Quitamos al Iframe TODA la opacidad para que sea totalmente transparente y se vea el fondo
obj_iframe_oculto.style.filter="alpha(opacity=0)"; // Opacidad para IE
obj_iframe_oculto.style.opacity="0.00"; // Ocapacidad para Netscape
// Hacemos que la capa sea totalmente visible
capa.style.display = "block";
// Definimos el ancho del IFRAME igual que el ancho de la capa, para que no se le vea
obj_iframe_oculto.style.width = capa.offsetWidth;
obj_iframe_oculto.style.height = capa.offsetHeight;
// Posicionamos el IFRAME en la misma posición que la capa (para que esté siempre detras)
obj_iframe_oculto.style.top = capa.style.top;
obj_iframe_oculto.style.left = capa.style.left;
// Bajamos de Z-index el IFRAME, para que esté debajo de la capa
obj_iframe_oculto.style.zIndex = capa.style.zIndex - 1;
// Definimos que el contenido del IFRAME esté VISIBLE
obj_iframe_oculto.style.display = "block"; // ESTA ES LA LINEA MAS IMPORTANTE
}
</script>
</head>
<body style="margin:0px" onmousemove="desplazar_capa(event);">
<table cellpadding="0" cellspacing="0" style="width:100%;height:100%" border="0">
<tr>
<td width="100%" height="100%" class="sp" align="center" valign="middle">
<form action="javascript:void(null)">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="150" height="25" align="left" valign="top">Select Multiple</td>
<td width="150" align="left" valign="top">Select Normal</td>
<td width="150" align="left" valign="top">Textarea</td>
<td width="150" align="center" valign="top">Boton</td>
<td width="150" align="left" valign="top">Checkbox</td>
<td width="150" align="left" valign="top">Radiobutton</td>
</tr>
<tr>
<td colspan="6" width="100%" height="1" bgcolor="#000000" class="sp"> </td>
</tr>
<tr>
<td colspan="6" width="100%" height="20" class="sp"> </td>
</tr>
<tr>
<td width="150" align="left" valign="top"><select multiple><option>Elemento Select</option></select></td>
<td width="150" align="left" valign="top"><select><option>Elemento Select</option></select></td>
<td width="150" align="left" valign="top"><textarea style="width:150px;height:150px"></textarea></td>
<td width="150" align="center" valign="top"><input type="Button" value="Boton"></td>
<td width="150" align="left" valign="top"><input type="Checkbox" value="Checkbox"></td>
<td width="150" align="left" valign="top"><input type="Radio" value="Radiobutton"></td>
</tr>
<tr>
<td colspan="6" width="100%" height="20" class="sp"> </td>
</tr>
<tr>
<td colspan="6" id="info" align="center"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<div id="capa" style="position:absolute; top:25px; left:50px; width:100px; height:40px padding:4px; display:none; background-color:#7598DE; color:#ffffff; z-index:100;">Esta es nuestra capa en la que tenemos el texto.<br><br>¿Se ocultará tras el SELECT?</div>
<iframe id="iframe_oculto" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"></iframe>
</body>
</html>
Espero que esto os sea de ayuda... y si hay algún comentario, hacermelo saber, que para eso estamos.. para seguir aprendiendo.
Un saludo
