Anzeigen von HTML-Elementen über Frames
bin-doph
- browser
Hi,
ich versuche eine Navigation mit versteckten <DIV>'s zu erstellen, die, wenn man über die Navigationspunkte mit der Maus fährt, eingeblendet und beim Verlassen ausgeblendet werden. Prinzipiell keine wirklich grosse Sache, allerdings habe ich ein IFrame das dann später für die Darstellung des Inhalts da ist, was Probleme verursacht. Die eingeblendeten <DIV>'s überlagern das IFrame, sieht auch relativ gut aus (außer im IE, der zeigts eigentlich überhaupt nicht so an, wie es sein sollte ...) und sobald man innerhalb der <DIV> über das IFrame kommt (also man bewegt die Maus runter im Menü und wenn man an dem Punkt angekommt, an welchem im Hintergrund das IFrame beginnt) wird das ganze <DIV> ausgeblendet. Das lustige ist, das ich meinen Mozilla austricksen kann. Wenn ich die Navigation öffne und ausserhalb der Navigation (quasi "oben rum") in das IFrame wechsle und von unten an die Navigation komme (also das <DIV>) funktioniert es solange bis man an die Grenze kommt.
Hier mal zum veranschaulichen und testen.
<html>
<head>
<script type="text/javascript">
function view(OBJECT) {
document.getElementById(OBJECT).style.visibility = "visible";
}
function hide(OBJECT) {
document.getElementById(OBJECT).style.visibility = "hidden";
}
</script>
<head>
<body>
<table width="100%" height="70" border="0" cellpadding="0" cellspacing="0">
<tr><td height="40"></td></tr>
<tr bgcolor="#034EA2"><td onMouseOver="view('navi')">NavigationsÜberpunkt</td>
</tr>
<tr><td height="10"></td></tr>
</table>
<iframe frameborder="0" src="/tmain.html" width="100%"></iframe>
<!-- versteckte div's für die Navigation -->
<div id="navi" style=";visibility:hidden; position:absolute; top:65px;" onMouseover="view('navi')" onMouseOut="hide('navi')">
<table cellpadding="0" cellspacing="0" bgcolor="#034EA2" onMouseover="view('navi')">
<tr><td><a class="link" href="/">Punkt 1</a></td></tr>
<tr><td><a class="link" href="/">Punkt 2</a></td></tr>
<tr><td><a class="link" href="/">Punkt 3</a></td></tr>
<tr><td><a class="link" href="/">Punkt 4</a></td></tr>
<tr><td><a class="link" href="/">Punkt 5</a></td></tr>
<tr><td><a class="link" href="/">Punkt 6</a></td></tr>
</table>
</div>
</body>
</html>
Wenn mir vielleicht jemand sagen könnte, wieso der IE das gleich garnet darstellt, wäre mir auch etwas geholfen. Allerdings nicht wirklich wenn mein Hauptproblem nicht verschwindet :>
cheers
-fe