Verzögerung bei Mouse Over?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Verzögerung bei Mouse Over?

    Hallo!

    Folgendes Problem: Ich mache bei einem Mouseover ein Layer mit zusätzlichen Infos sichtbar.

    Der Benutzer fährt also mit seiner Maus über einen Link und eine Ebene mit Text öffnet sich.

    Dies geschieht mir zu schnell, das Layer öffnet sich zu schnell.

    Ich dachte an setTimeout oder ähnliches, um das zu beheben - aber das funktioniert nicht so, wie ich mir das vorstelle.

    Im Prinzip läuft das so:

    Der Link ruf eine Javascript auf

    Quellcode

    1. <A id=nav1 onmouseover=\"MM_showHideLayers('Ambient-Media','','show' ...


    Das Javascript sucht sich das dazugehörige Layer und setzt die Eigenschaft auf visible.

    Quellcode

    1. function MM_showHideLayers() {
    3. var i,p,v,obj,args=MM_showHideLayers.arguments;
    4. for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    5. if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    6. obj.visibility=v; }
    8. }


    Beim Mouseout wird die Eigenschaft dementsprechend wieder auf hidden gesetzt und die Textebene blendet aus.

    Wenn ich in MM_showhideLayers jetzt ein setTimeout oder eine wait-Schleife reinsetze, erreiche ich nicht genau das, was ich will!

    Der Browser zeigt die Textebene dann zwar nach einer vordefinierten Zeit an, aber ist dies eben _immer_ der Fall!

    Ich möchte, dass, wenn der Benutzer nur kurz über den Link "streift" gar nichts angezeigt wird! Erst nach einer Zeit von - sagen wir - 500 Millisekunden mit der Maus über dem Link soll die Textebene angezeigt werden.

    Hat jemand eine Idee, wie man das realisieren kann?

    Danke!!!
    Um Rekursionen zu verstehen, muss man zuerst Rekursionen verstehen...

  • Hallo xound. Hab mir deine Seite angeschaut. Hier ist eine mögliche Lösung. Es sind bloß 4 kleine Funktionen, die hab ich unten plaziert (oder onLoad benutzen). Ein tipp: du schreibst tonnenweise text onmouseout - onmouseoover. Benutze Array (schau mein script an), ist 1000 mal leichter

    Quellcode

    1. <html><BODY>
    2. <TABLE border=1><TR><TD><A onMouseOver="start_Taimer(0);" HREF="">ebene1</A></TD>
    3. <TD rowspan=6">
    4. <div id="ebene1" style="visibility: hidden;">ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 ebene1 <div>
    5. <div id="ebene2" style="visibility: hidden;">ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 ebene2 <div>
    6. <div id="ebene3" style="visibility: hidden;">ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 ebene3 <div>
    7. <div id="ebene4" style="visibility: hidden;">ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 ebene4 <div>
    8. <div id="ebene5" style="visibility: hidden;">ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 ebene5 <div>
    9. <div id="ebene6" style="visibility: hidden;">ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 ebene6 <div>
    10. </TD></TR><TR>
    11. <TD><A onMouseOver="start_Taimer(1)" HREF="">ebene2</A></TD>
    12. </TR><TR><TD><A onMouseOver="start_Taimer(2);" HREF="">ebene3</A></TD>
    13. </TR><TR><TD><A onMouseOver="start_Taimer(3);" HREF="">ebene4</A></TD>
    14. </TR><TR><TD><A onMouseOver="start_Taimer(4);" HREF="">ebene5</A></TD>
    15. </TR><TR><TD><A onMouseOver="start_Taimer(5);" HREF="">ebene6</A></TD>
    16. </TR></TABLE></BODY>
    17. <SCRIPT LANGUAGE="JavaScript">
    18. <!--
    19. var layers = new Array("ebene1","ebene2","ebene3","ebene4","ebene5","ebene6");
    20. var layer_Status = new Array("hidden","hidden","hidden","hidden","hidden","hidden");
    21. var start_Taimer;
    22. var timerID = null;
    23. var timerRunning = false;
    25. function start_Taimer(num){
    26. if(timerRunning) clearTimeout (timerID);
    27. timerRunning=false;
    28. timerID = setTimeout('show_Layer('+num+')',1000);
    29. timerRunning = true;
    30. }
    32. function show_Layer(num){
    33. set_Layer(num);
    34. get_Layer();
    35. }
    37. function set_Layer(num){
    38. for (var i=0; i < layer_Status.length; i++) {
    39. if(num==i)
    40. layer_Status[i]="visible";
    41. else
    42. layer_Status[i]="hidden";
    43. }
    44. }
    46. function get_Layer(){
    47. for (var i=0; i<layers.length; i++) {
    48. document.getElementById(layers[i]).style.visibility = layer_Status[i];
    49. }
    50. }
    52. //-->
    53. </SCRIPT>
    54. </HTML>
    Alles anzeigen

  • "bruder" schrieb:

    Hallo xound. Hab mir deine Seite angeschaut. Hier ist eine mögliche Lösung. Es sind bloß 4 kleine Funktionen, die hab ich unten plaziert (oder onLoad benutzen). Ein tipp: du schreibst tonnenweise text onmouseout - onmouseoover. Benutze Array (schau mein script an), ist 1000 mal leichter


    Sehr gute Lösung! Ich habe das so verwirklicht und es funktioniert Prinzip genau so, wie ich es haben wollte. Vielen Dank!

    Auch die Idee mit dem Array ist wirklich gut, das spart mir eine Menge Arbeit bei Änderungen!

    Eine Sache allerdings noch:

    Quellcode

    1. $layer=array('Ambient-Media','Anzeigenwerbung','Außenwerbung','Corporate-Design','Coupouning','Direct-Mailing','E-Mail-Marketing','Event-Marketing','Hausmesse','Kataloge','Kundenzeitschrift','Kundenzufriedenheit','Messen','Mobil-Marketing','Online-Marketing','Public Relations','Presse-Informationen','Pressekonferenz','Prospekt','Radiowerbung','Roadshow','Sponsoring','Streuplaene','Telefon-Marketing','TV-Werbung','Verkaufsförderung','Verkaufswettbewerbe','Werbegeschenke');
    3. for($i=0;$i<28;$i++) {
    4. $j = $i+1;
    5. echo"<A id=nav".$j." onmouseover=\"start_Taimer(".$i.");\" onmouseout=\"MM_showHideLayers('".$layer[$i]."','','hide');\" href=\"#\">".$layer[$i]."</A>";
    6. }


    Ich habe den onmouseout mit meiner alten showHideLayer-Funktion realisiert.

    Das einzige, was mir negativ auffällt, ist, dass sobald ich ganz kurz einen Link überfahre, also diesen wirklich nur aus Versehen antippe, die Ebene erscheint und nicht wieder verschwindet.

    Irgendwie greift dann der onmouseout nicht - ich verstehe momentan nicht warum.

    Also: Wenn ich mit der Mouse ganz kurz einen Link berühre, dann bleibt das Layer stehen - es sollte aber eigentlich anhand des onmouseout wieder verschwinden. Der onmouseout wird allerdings augenscheinlich bei schnellem Überfahren missachtet. Bei langsamen Überfahren funktioniert es perfekt.

    Wie kann man das lösen?
    Um Rekursionen zu verstehen, muss man zuerst Rekursionen verstehen...

  • die Funktion show_Layer(num) übernimmt eine Zahl und das Array layer_Status wird nach dieser Zahl durchgesucht. Wenn was gefunden wird, wird das Layer auf "visible" gesetzt. Und wenn nichts gefunden wird werden alle Layers unsichtbar. Du mußt eine passende Zahl finden, ich schlage vor: -1 (ist auch üblich so) . Dazu brauchst du noch eine Function.

    Quellcode

    1. function kill_All(){
    2. clearTimeout (timerID);
    3. timerRunning=false;
    4. show_Layer(-1);
    5. }



    Also hier ist ein Beispiel für das Link:

    Quellcode

    1. <A onMouseOver="start_Taimer(0);" onMouseOut="kill_All();" HREF="">