ilch Forum » Allgemein » HTML, PHP, SQL,... » JS-Popup einblenden mit Mausposition

Geschlossen
  1. #1
    User Pic
    dcb Mitglied
    Registriert seit
    01.01.2007
    Beiträge
    31
    Beitragswertungen
    0 Beitragspunkte
    Hi

    vllt kann mir hier jemand helfen.
    Habe schon in Selfhtml und über Suchmaschinen geschaut,
    aber ich bekomme das nicht hin.
    Ich möchte ein layer anzeigen lassen.
    Dieser Div-Bereich funzt auf jeden Fall, habs schon mehrmals ausprobiert. Der Div-Bereich ist zu Beginn nicht sichtbar
    display = none;


    Ein OnmouseOver-Event soll dann eben
    function openmcnewpop() aufrufen, das funktioniert auch.

    Allerdings funktioniert das unten nicht.
    Die Position soll ist des Mauszeigers zum Zeitpunkt des Klicks sein
    (und top eben noch +10px; und left -20px)


    Javascript: func
    function openmcnewpop() {
     
    alert('test');
            
    
    document.getElementById("mcnewpop").style.display = "inline";
    document.getElementById("mcnewpop").style.top=clientY+10+"px"; 
    document.getElementById("mcnewpop").style.left=.clientX-20+"px";   
    }
     
    
    
     
    function closemcnewpop () 
     {
    
     document.getElementById("mcnewpop").style.display = "none";
     }


    Kann mir jmd helfen?

    lg


    verwendete ilchClan Version: 1.1
    Wer im Leben selbst kein Ziel hat,
    kann wenigstens das Vorankommen der anderen stören.
    (Benjamin Franklin)
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Surangumal Mitglied
    Registriert seit
    01.01.2009
    Beiträge
    28
    Beitragswertungen
    0 Beitragspunkte
    Hi,

    das Problem an so einem Skript ist, dass IE und der Rest diese Events anders behandeln, man muss also ein JavaScript schreiben, dass dies berücksichtigt.

    Hier ist ein Skript das ich mal geschrieben (oder wo abgeschaut) habe. Du kannst es ja deinen Wünschen anpassen:

    1.) du musst einen mouse positions listener registieren:
    (die Funktion "handleMouseMove" kommt unter 3.) )

    // eins ist für IE, das andere für andere browser
    if (document.addEventListener) {
    		   document.addEventListener("mousemove", handleMouseMove, false);
    		}
    		else {
    			document.onmousemove = handleMouseMove;
    		}


    2.) du brauchst variablen in dem die aktuelle position gespeichert wird:

    		var mouseX = 0;
    		var mouseY = 0;


    3.) die Funktion handleMouseMove

    function handleMouseMove(e) {
                        // der IE übergibt e nicht
    			if (!e) {
    				var e = window.event;
    			}
    		  if (document.all) {
                                    // if IE
    				mouseX = event.clientX + document.body.scrollLeft;
    				mouseY = event.clientY + document.body.scrollTop;
    		  } else {
                                    // alle anderen browser
    				mouseX = e.pageX
    				mouseY = e.pageY
    		  }
    		  if (mouseX < 0){mouseX = 0}
    		  if (mouseY < 0){mouseY = 0}	
    
    			document.getElementById("infodiv").style.left = (mouseX-100) + "px";
    			document.getElementById("infodiv").style.top = (mouseY - 100) + "px";
    
                     // warum das drin ist, weiß ich nicht mehr ;)
    		  return true
    		}


    4.) jetzt 2 funktionen zum ein und ausschalten der info:

    		function showInfo() {
    			text = "was auch immer ;)";
    			document.getElementById("infodiv").innerHTML = text;
    			document.getElementById("infodiv").style.display = "";
    		}
    		function hideInfo() {
    			document.getElementById("infodiv").style.display = "none";
    		}


    5.) das muss irgendwo in die seite:

    <div id="infodiv" style="display:none;position:absolute;height:160px;width:250px;border:2px solid red;padding:5px;background-color:black;top:1px;left:1px;"></div>


    6.) so baut man dann die fliegend Info irgendwo ein:

    <div onmouseover='showInfo();' onmouseout='hideInfo();'>
    hier kommt der bereich der ge-infot werden soll
    </div>



    Zuletzt modifiziert von Surangumal am 04.01.2009 - 23:45:45
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    dcb Mitglied
    Registriert seit
    01.01.2007
    Beiträge
    31
    Beitragswertungen
    0 Beitragspunkte
    hi danke

    habs ausprobiert, ein paar Dinge noch ans Design angepasst und es funzt.
    thx
    Wer im Leben selbst kein Ziel hat,
    kann wenigstens das Vorankommen der anderen stören.
    (Benjamin Franklin)
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten