nicht angemeldet
onmouseout problem + setTimeout Problem
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
-
Hallo Merri,
bin zwar kein JS Experte, aber lt. doku heisst es window.setTimeout
mfg Steffen
-
Hi,
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).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.
Ich bezweifle, dass das überhaupt ein JavaScript-Problem ist.
Für wahrscheinlicher halte ich es, dass es eines der generellen Probleme mit dem wiederholten Einblenden animierter GIF-Grafiken ist. Dabei kann es je nach Browser unterschiedlichste Probleme geben. Dass der Browser dabei einfach „vergisst“, die Animation beim erneuten Einblenden wieder von vorne zu starten, kommt nach meiner Erfahrung häufiger vor.
<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>Hier überhaupt JavaScript einzusetzen, ist natürlich schon mal wenig sinnvoll - du machst hier eine der wichtigsten Funktionalitäten der Seite, die Navigation, von JavaScript abhängig - und das auch noch völlig grundlos. Zum Verlinken solltest du Links nehmen, und keine DIVs per JavaScript dazu zweckentfremden. (Ich nehme an, dass geschah aus Unkenntnis über den Umgang mit CSS heraus - weil normale Links als Inline-Elemente sich keine Breite und Höhe geben lassen wollten ...?) Wechsel der Hintergrundbilder ginge auch per CSS im Linkzustand :hover (wobei das hier mit dem Startzustand allerdings problematisch werden könnte). Was die grundsätzliche Problematik mit dem Wiederholten Abspielen von GIF-Animationen bei der Wieder-Anzeige angeht habe ich recht brauchbare Erfahrungen damit gemacht, per JavaScript neue Image-Elemente zu erzeugen, deren src-Attribut erneut zu setzen, und dann das im Dokument vorhandene Bildelement-Objekt mit dem neuen auszutauschen. Diese Methode funktioniert allerdings nur mit IMG-Objekten im HTML, nicht mit Hintergrundbildern - aber darauf könnte man das ganze ja auch hier umstellen (CSS-Kenntnisse vorausgesetzt). Oder, ggf. könnte man die Animation auch komplett von der GIF-Technik befreien, und mit statischen Hintergrundbildern über kontinuierliches Verändern der background-position per JavaScript ersetzen - aber das kommt auf den genauen Aufbau und Ablauf deiner Animation an (und die wird daraus, dass du nur Quelltext gezeigt hast, natürlich nicht ersichtlich). Und btw., Frames solltest du eigentlich auch los werden, um die Nutzbarkeit deiner Seite zu steigern. MfG ChrisB -- “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Ok, dann werd' ich noch ein bisschen weiter rumprobieren. Das mit den Frames überleg' ich mir nochmal... und die div's hab' als Links gesetzt, damit der gesamte Bereich als Link funktioniert, nicht nur der Text. Vielleicht geht das ja auch noch anders...
Oh, und danke für den Tipp mit dem "background-position" :), das werd ich wohl erstmal ausprobieren, weil mir das was du mit neue Elemente erzeugen usw. nicht so viel sagt.
lg Merri
-