Merri: onmouseout problem + setTimeout Problem

Beitrag lesen

SELF-Forum

onmouseout problem + setTimeout Problem

Merri
– Informationen zu den Bewertungsregeln

Hallo!

Ich schreibe gerade an einer Website und habe da ein kleines Problem bei meinem Navigations - Frame:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
    <head>  
        <title>  
            steuerung  
        </title>  
        <link href="style.css" type="text/css" rel="stylesheet" />  
        <script type="text/javascript">  
            function mouseOver(control)    { document.getElementById(control).style.backgroundImage ="url(bilder/m1.gif)"; }  
            function mouseOut(control)     { document.getElementById(control).style.backgroundImage ="url(bilder/m2.gif)"; }  
        </script>  
        </head>  
    <body>  
        <div id="seite1" onmouseover="mouseOver('seite1')" onmouseout="mouseOut('seite1')" onclick="window.open('seite1.html','inhalt','');">  
            Seite1  
        </div>  
        <div id="seite2" onmouseover="mouseOver('seite2')" onmouseout="mouseOut('seite2')" onclick="window.open('seite2.html','inhalt','')">  
            Seite2  
        </div>  
    </body>  
</html>

CSS - Datei:

  
#seite1  {  
            margin-bottom: 2px; font-weight: bold;  
            background-image: url(bilder/1.gif);  
            background-repeat: no-repeat;  
            }  
#seite2    {  
            margin-bottom: 2px; font-weight: bold;  
            background-image: url(bilder/1.gif);  
            background-repeat: no-repeat;  
            }

Soweit der Quelltext (eignetlich noch mit noch mehr .
m1.gif ist ein Balken, der von links nach rechts fährt,
m2.gif ein Balken von rechts nach links,
und 1.gif  ist der Balken ohne Animation in der Ausgangslage (also links).

Bezwecken soll das also eigentlich, dass, wenn ich mit der Maus über den div fahre, der Balken nach rechts fährt und wenn ich wieder runtergehe nach links.

Was es tatsächlich macht:
Wenn ich mit der Maus über den ersten div gehe, ist alles wunderbar. Der Balken fährt nach rechts. Wenn ich runter gehe passt auch noch alles, fährt schön zurück. Das kann ich so oft ich will machen, klappt immer, bis ich auf den zweiten div komme. Der fährt dann nur noch raus so schön, wenn ich ihn verlasse springt das Bild sofort, ohne die Animation zurück. Und beim ersten div funktioniert das nun auch nicht mehr, da springt der Balken auch sofort wieder zurück.

2. Problem:

wenn ich nun noch ein setTimeout hinzufüge, also so:

  
<div id="seite1" onmouseover="mouseOver('seite1')" onmouseout="setTimeout('mouseOut(\'seite1\')', 1500)" onclick="window.open('seite1.html','inhalt','');">  
            Seite1  
</div>  
<div id="seite2" onmouseover="mouseOver('seite2')" onmouseout="setTimeout('mouseOut(\'seite2\')', 1500)" onclick="window.open('seite2.html','inhalt','')">  
</div>

dann wird das alles völlig konfus. Manchmal funktionierts so wie ich will, manchmal geht gar nix.

Ich benutze Firefox, v3.6; Windows XP

Schonmal im Vorraus danke für die Hilfe :)

lg Merri

Beitrag melden
–
Informationen zu den Bewertungsregeln