SELECTBOX unter DIV-Layer verstecken ?!?!
Jörg Hagemann
- dhtml
Ich habe ein Formular mit einigen Selectboxen aufgebaut. Zu den einzelnen Formularelementen möchte ich dynamisch ein <DIV>-Layer mit Erläuterungen einblenden, wenn der User mit der Maus über eine kleine Grafik fährt (Mouseevents, visibility, etc). Das Problem liegt darin, daß die INPUT-Elemente von dem Hilfefenster verdeckt werden, die Selectboxen aber nicht.
Mit z-index, etc. habe ich schon experimentiert, kein Erfolg.
Hat jemand eine Idee ?
(Brauche nur Lösung für IE)
HTML zum Testen:
<html>
<head></head>
<body>
<A HREF="javascript:void(0);" onMouseOver="javascript:document.all.h001.style.visibility='visible';" onMouseOut="javascript:document.all.h001.style.visibility='hidden';">Hilfe anzeigen</A>
<FORM ACTION="">
<SELECT NAME="lst_frommonth">
<OPTION VALUE="1">Jan</OPTION>
<OPTION VALUE="2">Feb</OPTION>
<OPTION VALUE="3">Mär</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="text">
</FORM>
<DIV ID="h001" STYLE="visibility: hidden; position: absolute; top: 60px; left: 30px; z-index: 20">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#FFFF00">
</TR><TD WIDTH=200>Hier steht der Hilfetext<BR>Selectbox wird nicht überlagert</TD></TR>
</TABLE>
</DIV>
</body>
</html>
Wenn ich es mit SPAN anstatt DIV mache geht es bei mri auf jeden Fall. Z-INDEX:999;
CIAO
Michael
Ich habe ein Formular mit einigen Selectboxen aufgebaut. Zu den einzelnen Formularelementen möchte ich dynamisch ein <DIV>-Layer mit Erläuterungen einblenden, wenn der User mit der Maus über eine kleine Grafik fährt (Mouseevents, visibility, etc). Das Problem liegt darin, daß die INPUT-Elemente von dem Hilfefenster verdeckt werden, die Selectboxen aber nicht.
Mit z-index, etc. habe ich schon experimentiert, kein Erfolg.
Hat jemand eine Idee ?
(Brauche nur Lösung für IE)HTML zum Testen:
<html>
<head></head>
<body>
<A HREF="javascript:void(0);" onMouseOver="javascript:document.all.h001.style.visibility='visible';" onMouseOut="javascript:document.all.h001.style.visibility='hidden';">Hilfe anzeigen</A>
<FORM ACTION="">
<SELECT NAME="lst_frommonth">
<OPTION VALUE="1">Jan</OPTION>
<OPTION VALUE="2">Feb</OPTION>
<OPTION VALUE="3">Mär</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="text">
</FORM>
<DIV ID="h001" STYLE="visibility: hidden; position: absolute; top: 60px; left: 30px; z-index: 20">
»» <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#FFFF00">
</TR><TD WIDTH=200>Hier steht der Hilfetext<BR>Selectbox wird nicht überlagert</TD></TR>
»» </TABLE>
</DIV>
</body>
</html>
Erstmal vielen Dank für Deine Antwort. Leider funktioniert es bei mir auch mit SPAN nicht. Ich benutze IE 5.0, vielleicht liegt es daran.
Wenn ich es mit SPAN anstatt DIV mache geht es bei mri auf jeden Fall. Z-INDEX:999;
CIAO
Michael
Hi
Was du machen kannst, ist einfach die ganze Selectbox unsichtbar machen.
also ungefaehr so:
<html>
<head>
<script language="JavaScript">
<!--
function tus1() {
document.all.h001.style.visibility='visible'
document.all.lst_frommonth.style.visibility='hidden';
}
function tus2() {
document.all.h001.style.visibility='hidden'
document.all.lst_frommonth.style.visibility='visible'
}
//-->
</script>
</head>
<body>
<A HREF="javascript:void(0);" onMouseOver="tus1();" onMouseOut="tus2();">Hilfe anzeigen</A>
<FORM ACTION="">
<SELECT NAME="lst_frommonth">
<OPTION VALUE="1">Jan</OPTION>
<OPTION VALUE="2">Feb</OPTION>
<OPTION VALUE="3">Mär</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="text">
</FORM>
<span ID="h001" STYLE="visibility: hidden; position: absolute; top: 60px; left: 30px; z-index: 20">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#FFFF00">
</TR><TD WIDTH=200>Hier steht der Hilfetext<BR>Selectbox wird nicht überlagert</TD></TR>
</TABLE>
</span>
</body>
</html>
Tschau Holger