Vielen ist bestimmt schon aufgefallen, daß sich Formularelemente auf einer Webseite, welche im Internet Explorer angezeigt wird, gerne in den Vordergrund drängeln. Dieser Effekt nervt vor allem, wenn individuelle Tooltips mittels DIV-Layer für eine Eingabemaske eingebaut werden.
Die Lösung dieses Problems besteht in der Integration eines iFrames, welches zwischen den Formular-Elementen und dem darüber anzuzeigenden Inhalt liegt. Dieser Trick wird auch gerne “Iframe Shim” genannt. Ein Beispiel-Code wird hier aufgelistet:
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br>
<br>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br>
<br>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>
Für das oben angesprochene Problem mit den Tooltips müssen die Layer nun entsprechend automatisch aktiviert bzw. deaktiviert werden. Dazu wird das Mouse-Move-Event in Kombination eines Timers eingesetzt. Ein gutes Beispiel hierfür findet man unter anderem auch auf der Seite von Dynamic Web Coding.
AUG