✔ JavaScript: Probleme mit onMouseOut

[SilentWarrior]

Moin moin

Also, ich hab mich mal gewagt, ein bisschen JavaScript zu machen. War glaub ich ein Fehler. *g* Also folgendes: Ich hab ein Menü, da hat es oben so ca. 10 Buchstaben. Wenn man über einen fährt, dann ändert sich weiter unten ein Bild (entsprechend dem Buchstaben). Das ist ja nicht das Problem, so viel krieg ich auch noch selber hin. Mein Problem ist: Ich hätte gerne, dass, wenn man von einem Buchstaben wieder wegfährt (also bei onMouseOut) das Bild sich nicht gleich wieder zum Standard-Bild verwandelt, sondern etwas wartet (so ca. 0,2 Sekunden). Das soll folgendem Zweck dienen: Wenn man mit der Maus schnell von einem Buchstaben zum anderen schwirrt, ändert sich das Bild nur von Buchstabe zu Buchstabe und nicht von Buchstabe zu Hintergrund zu Buchstabe. ok, wenn jetzt noch einer da ist, dann ist er auch fähig, das Problem zu lösen. hier mal der code (zuerst das JavaScript):

<script type="text/javascript">
<!--

Normal0 = new Image(129,129);
Normal0.src = "fertige_produkte/default.gif";

Normal1 = new Image(125,125);
Normal1.src = "fertige_produkte/frontpage.gif";

Normal2 = new Image(125,125);
Normal2.src = "fertige_produkte/wallpapers.gif";

Normal3 = new Image(125,125);
Normal3.src = "fertige_produkte/links.gif";

Normal4 = new Image(125,125);
Normal4.src = "fertige_produkte/stuff.gif";

Normal5 = new Image(125,125);
Normal5.src = "fertige_produkte/aboutme.gif";

Normal6 = new Image(125,125);
Normal6.src = "fertige_produkte/guestbook.gif";

function imagechange(imagenr)
{
 window.document.navhelp.src = imagenr.src;
 window.document.navhelp.height = 125;
 window.document.navhelp.width = 125;
}

function retour(i)
 {
  if(window.document.navhelp.src = i.src)
   {
    window.document.navhelp.src = Normal0.src;
    window.document.navhelp.height = 129;
    window.document.navhelp.width = 129;
   }
 }
//-->
</script>

und dann im entsprechenden Buchstaben halt folgendes:

 onMouseOver="imagechange(Normal1)" onMouseOut="window.setTimeout('retour(Normal1)',200)"

das einzige problem besteht eigentlich darin, dass ich nicht weiss, wie ich folgendes realisieren kann: wenn der User innerhalb dieser 200 Millisekunden bereits über einen anderen Buchstaben gefahren ist, soll dessen Bild unten erscheinen. Das klappt auch - nur wechselt dann das halt trotzdem nach 200 Millisekunden zum Hintergrundbild. Man müsste also die Funktion, die das Hintergrundbild einblendet, irgendwie deaktivieren, wenn der User innerhalb einer vorgegebenen Zeitspanne bereits mit der Maus über einen anderen Buchstaben gefahren ist.

... juhu! ich freu mich dann mal auf viele interessante beiträge.

 

[Adam Wille]

Dann musst du einen evtl. bestehenden Timeout bei jedem mouseOver auf einen der Links wieder canceln, das geht mit der window.clearTimeout()-Methode, nähere Infos bekommst du in SelfHTML oder einem JavaScript-Nachschlagewerk deiner Wahl.

onMouseOver="if (timeout) window.clearTimeout(timeout); imagechange(Normal1);" onMouseOut="timeout = window.setTimeout('retour(Normal1)',200)"

hth,
Geist

 

[SilentWarrior]

ich hab's gewusst. *gg* geist, der welten grösster experte für javascript. ich danke dir vielmals, hab jetzt bisschen gestöbert und alles läuft perfekt. was man allerdings noch beachten sollte, man muss die variable timeout vor den funktionen definieren:

var timeout = "";

sonst gibt's (zumindest bei mir) ne fehlermeldung.

// edit: uaaah... ich werd noch wahnsinnig wegen dem scheiss :[-smilie. das muss unbedingt mal einer umcoden, muss nämlich fast jeden beitrag noch editieren. das nervt!