nicht angemeldet
wechsel zwischen Mouseover und Mouseout
Tag,
ich hab ein kleines Problem: Ich hab ein Pulldown Menü definiert, das auklappt, sobald man mit der Maus darüber fährt. Es sollte eigentlich erst zurückfahren, wenn man mit der Maus den Bereich verlässt. Irgenwie registriert der aber, sobald man die Maus bewegt, das sie aus dem Bereich geht und direkt wieder rein, was zu einem dauerndem Wechsel zwischen Auf und zu führt. Kann mir da jemand helfen?
Hier mal der Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>aufklappen</title>
<meta name="generator" content="HTML Studio">
<script language="JavaScript">
var secondstatus;
var secondoffen;
var secondzu;
var fthirdstatus;
var fthirdoffen;
var fthirdzu;
var welche;
function definieren()
{
secondstatus = "zu";
secondoffen = 90;
secondzu = 0;
fthirdstatus = "zu";
fthirdoffen = 50;
fthirdzu = 0;
}
function gross(ebene)
{
welche = ebene;
eval("var zuerst = " + ebene + "zu;");
eval("var danach = " + ebene + "offen;");
eval("var status = " + ebene + "status;");
if((status == "offen")&&())
{
alert(
}
else if(status == "zu")
{
eval("document.all." + ebene + ".style.display = '';");
zuerst = zuerst*1+1;
danach = danach*1-1;
eval("document.all." + ebene + ".style.height = '" + zuerst + "px';");
eval(ebene + "zu = zuerst;");
eval(ebene + "offen = danach;");
if(danach == 0)
{
eval(ebene + 'status = "offen";');
eval("document.all." + ebene + ".style.overflow = '';");
}
else if(danach > 1)
{
window.setTimeout("gross(welche)", 1);
}
}
else if(status == "offen")
{
eval("document.all." + ebene + ".style.overflow = 'hidden';");
zuerst = zuerst*1-1;
danach = danach*1+1;
eval("document.all." + ebene + ".style.height = '" + zuerst + "px';");
eval(ebene + "zu = zuerst;");
eval(ebene + "offen = danach;");
if(zuerst == 0)
{
eval(ebene + 'status = "zu";');
eval("document.all." + ebene + ".style.display = 'none';");
}
else if(zuerst > 1)
{
window.setTimeout("gross(welche)", 1);
}
}
}
function hervorheben (ebene, css)
{
eval("document.all." + ebene + ".style.background = '" + css + "';");
}
</script>
</head>
<body onLoad="definieren();">
Hello, World!<br>
<div id="box1" style="position:absolute; background:#00CCFF;" onMouseOver="gross('second')" onMouseOut="gross('second')">
box1
<div id="second" style="position:absolute; top:1.1em; left:0px; overflow:hidden; width:100px; height:0px; background:#00CCFF; display:none;">
box1 <br>
hallo<br>
<div id="fthirdh" style="position:absolute; background:#00CCFF; top:2.4em; left:0px; width:100px;" onMouseOver="hervorheben('fthirdh', '#3366FF'); gross('fthird','','0','50');" onMouseOut="hervorheben('fthirdh', '#00CCFF'); gross1('fthird', 'none','50','0')">
test
<div id="fthird" style="position:absolute; top:0em; left:100px; overflow:hidden; width:100px; height:0px; background:#00CCFF;">
hallo,
</div>
</div>
<div id="ffourh" style="position:absolute; background:#00CCFF; top:3.5em; left:0px; width:100px;" onMouseOver="hervorheben('ffourh', '#3366FF'); gross1('ffour','','0','50')" onMouseOut="hervorheben('ffourh', '#00CCFF'); gross1('ffour', 'none','50','0')">
test2
<div id="ffour" style="position:absolute; top:0em; left:100px; background:#00CCFF; display:none; width:100px; height:0px;">
hallo
</div>
</div>
</div>
</div>
<br>
Hallo,
</body>
</html>
Wäre echt sehr nett wenn mir da jemand weiterhelfen würde.
cu, Stefan
-
Hi,
ich hab ein kleines Problem:
nein, ein grosses, weil grundsaetzliches Problem. Je nach Browser feuert onmouseout auch innerhalb eines Divs, wenn die Maus z. B. einen Link ueberfaehrt. Du musst also geeignete Massnahmen treffen, um vor dem Zuklappen zu ueberpruefen, ob Mouseout auch tatsechlich stattgefunden hat.
Eine Moeglichkeit ist es, nach einem timeout nochmals auf mousemove im Div-Layer zu ueberpruefen, so wie in diesem Test http://www.wendenburg.de/test/divNaviStat.html
Desweiteren kann man im IE mit "contains" ueberpruefen, ob sich ein Element innerhalb eines anderen befindet. Im Mozilla muss man dazu alle childNodes durchlaufen. Die Navi auf meiner Seite arbeitet nach diesem Prinzip.
Dann gibt es noch die Moeglichkeit, einen Dummylayer passend ueber den Menuepunkt zu legen, der nur zu Eventregistrierung dient, wie z, B, in diesem Beispiel: http://www.wendenburg.de/test/dhtmlNavi.html
Vermutlich gibts noch ein paar andere Ansaetze, google hilft weiterEs ist also keineswegs trivial, ein zuverlaessiges Dhtml-Menue zu bauen. Deines zielt eh nur auf IE ab, das ist unzureichend.
Gruesse Joachim