Delay bei onmouseout!

foxx21

foxx21

Erfahrenes Mitglied
Hallo liebe Community!

Hab hier einen Div, welcher einen anderen aufruft und noch eine Funktion die ein Bild wechselt. Das Problem ist aber nur, dass der aufgerufene Div "submenu" gleich wieder verschwindet bei onmouseout. Deshalb dachte ich mir das ganze mit Delay zu lösen, damit der User auch rechtzeitig mit der Maus beim Untermenü ankommt!

Bin ich überhaupft auf dem richtigen weg?

Wie wär jetzt die Syntax mit Delay? Kann ich das einfach hier einfügen, oder brauch ich dazu eine extra Funktion?

Code: 
<div id="nav_punkt1"><h1><a onmouseover="document.getElementById('submenu').style.visibility='visible'; SwapImage(arrow1, 'img/nav_img_over.gif')" onmouseout="document.getElementById('submenu').style.visibility='hidden'; SwapImage(arrow1, 'img/nav_img.gif')"   href="#">NEWS</a></h1></div>

danke im Voraus
 
Hi,

mit der Methode setTimeout kannst du eine Anweisung zeitversetzt ausführen.

So kannst du zum Beispiel im onmouseout-Event einen Timer starten, der die Funktion zum Verstecken
aufruft. Wird dieser vor Ablauf der Zeit gestoppt (clearTimeout), wird das Schliessen gestoppt.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--

 //-->
</style>
<script type="text/javascript">
  <!--
var hTimer_01 = hTimer_02 = null;

function showSub(objElem){
  var hTest = eval("hTimer_"+objElem.id.split("_")[1]);
  if(hTest != null){
    window.clearTimeout(hTest);
    hTest = null;
  }
  document.getElementById("sub_"+objElem.id.split("_")[1]).style.display = "block";
}

function hideSub(objElem){
  eval("hTimer_"+objElem.id.split("_")[1]+" = window.setTimeout(function(){hideMe(objElem);}, 1000);");
}

function hideMe(objElem){
  document.getElementById("sub_"+objElem.id.split("_")[1]).style.display = "none";
}
 //-->
</script>
</head>
<body>
<div style="float: left; width: 200px; border: 1px solid #000;">
  <div id="main_01" onmouseover="showSub(this);" onmouseout="hideSub(this);">Eins</div>
  <div id="sub_01" onmouseover="showSub(this);" onmouseout="hideSub(this);" style="display: none; margin-top: 40px; background: #efefef;">Ich bin versteckt</div>
</div>
<div style="float: left; width: 200px; border: 1px solid #000;">
  <div id="main_02" onmouseover="showSub(this);" onmouseout="hideSub(this);">Eins</div>
  <div id="sub_02" onmouseover="showSub(this);" onmouseout="hideSub(this);" style="display: none; margin-top: 40px; background: #efefef;">Ich bin versteckt</div>
</div>
</body>
</html>
- Zu jedem Menupunkt muss eine Timervariable (hTimer_01, hTimer_02 ...) existieren
- IDs der Hauptmenues bestehen aus Präfix und Suffix getrennt durch "_"
- Die IDs der Submenues beginnen mit "sub_"
- Die Suffixes von Haupt-, Submenues und Timervariable müssen übereinstimmen

Vielleicht kannst du etwas damit anfangen.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück