Menü mit onMouseover/CSS
C. Klinger
- css
Hallo,
ich versuche ein Menü mit per <div und CSS definierten Ebenen zu erstellen.
Wenn man auf den 1. Menüpunkt kommt, zeigt sich eine Ebene, damit diese nicht verschwindet, wenn man die Maus auf sie bewegt - da in der 1.Ebenendef. onmouseout="hide..." steht - rufe ich mit onmouseover in der 2.Ebene diese selbst auch auf.
Mit IE funktioniert dies, Netscape aber führt erst die Funktion zum verstecken aus, so dass beim Übergang mit der Maus diese Ebene verschwindet.
Ich habe schon versucht, es per Verzögerung zu verhindern, aber auch das klappt nicht.
Wäre schön, wenn mir jemand helfen könnte.
Gruß c.
Hi
Wo dein Fehler liegt kann ich ohne Quelltext (oder URL) leider gar nicht sagen. Aber prinzipiell muesste das ganze so funktionieren wie du das beschrieben hast. Eine Seite die auch so ein Menue verwendet ist http://www.intel.de aber ich bezweifel das du aus dem Quelltext schlau wirst.
Also: Gib uns und dir eine Chance und verrat ein bischen was von deinem Quelltext ;-)
Tschau Holger
Also: Gib uns und dir eine Chance und verrat ein bischen was von deinem Quelltext ;-)
Du kannst ihn dir ansehen unter:
<a href="http://www.members.tripod.com/Oni-page/test.htm"> testseite </a>
vielen Dank bis hierher!
Carsten
Hi
So kann das natuerlich nicht funktionieren, da weder onmouseover, noch onmouseout im Netscape in div's definiert sind. (siehe <../../tebj.htm#a18>)
Du musst einen Timeout einbauen um ueberhaupt eine Chance zu haben die divs eine weile anzuzeigen.
also z.B. window.setTimeout("sichtbar()",Wartezeit); (siehe <../../tecb.htm#a45>)
Da onmouseout/over nur in <a> und <area> definiert ist, wird dein div also in jedem Fall nur dann sichtbar bleiben koennen, wenn dort (im div) ein Verweis drinsteht und der User mit der Maus ueber dem Verweis steht. Innerhalb des Verweises musst du dann definieren, das eben das div das den Verweis enthaellt solange sichtbar bleibt bis die Maus nicht mehr ueber dem Verweis ist. (oder bei einem Timeout, bis der Timeout vorbei ist)
Dazu musst du zuerst mit einem clearTimeout den alten Timeout stoppen und das div wieder "ganz normal" also ohne Timeout anzeigen. Beim onMouseout wird dann wieder ein Timout gestartet.
Hier mal kurz dein Beispiel:
<html>
<head>
<title>test</title>
<script language="JavaScript">
<!--
var aktiv;
if (document.layers){ns = 1; ie = 0;}
else {ns = 0; ie = 1;}
function show(name) {if (ns) {document.layers['' + name].visibility = "show";}
else {document.all['' + name].style.visibility = "visible";}
}
function hide(name) {if (ns) {document.layers['' + name].visibility = "hide";}
else {document.all['' + name].style.visibility = "hidden";}
}
var visib;
function visible(name) { visib = document.all['' + name].style.visibility;
alert(visib); }
function zeigen(ebene) {
if (ns) {
clearTimeout(aktiv);
document.layers['' + ebene].visibility = "show";}
return
}
//-->
</script>
</head>
<body>
<div style="position:absolute;top:11pt;background-color:#fedcba;z-index:1">
<a href="#" onmouseover="zeigen('b')" onmouseout="aktiv=window.setTimeout('hide('b')',2000)">
[b ZEIGEN]
</a>
</div>
<div id="b" onmouseover="show('b')" onmouseout="hide('b')" style="position:absolute;top:24pt;left:10pt;visibility:hidden;background-color:#abcdef;z-index:2">
ich bin B<br>
<a href="#" onmouseover="zeigen('c');zeigen('b')" onmouseout="window.setTimeout('hide('c')',2000);aktiv=window.setTimeout('hide('b')',2000);">
mach c auf
</a>
</div>
<div id="c" style="position:absolute;top:52pt;left:35pt;visibility:hidden;background-color:#abcdef" onmouseover="show('c');show('b')" onmouseout="hide('c');hide('b')">
ich bin c
</div>
</body>
</html>
Tschau Holger