kostenloser Webspace werbefrei: lima-city


JS Mausposition ermitteln

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    Hallo,
    ich versuche nun schon seit längerem, ein Javascript Script zu erstellen, dass die Mausposizion X und Y ermittelt. Sinn der Sache ist es, einen kleinen
    <div>
    Kontainer an der Maus einzublenden, wenn diese über einem bestimmten Teil der Seite ist.
    Mein Ansatz:
    HTML:
    <img src="asdf.jpg" alt="" onmouseover="Info('Nachricht, die angezeigt werden soll, wenn der Benutzer die Maus über den Div bewegt', 1)" onmouseout="Info('Text', 0)">
    <div id="InfoBox">
    <!-- Dieser Div wird an der Maus angezeigt und enthält den Text. -->
    </div>

    JS:
    function Info(Text, Anzeige) { //Text = Text, der angezeigt werden soll, Anzeige = 0 -> Div ausblenden, 1 -> Div anzeigen.
      if(Anzeige == 0) {
        document.getElementById('InfoBox').style.display = 'none';
      } else {
        //Hier muss der Teil hin, der die X und Y Position der Maus abfragt.
        document.getElementById("InfoBox").style.left  = X-Position;
        document.getElementById("InfoBox").style.top = Y-Position;
        document.getElementById('InfoBox').style.display = 'block';
        $("#InfoBox").html(Text); //Text wird über jQuery in den Div geladen
      }
    }

    Beim laden der Seite ist der
    <div id="InfoBox">
    mit CSS auf
    display:none;
    gestellt.
    Hat jemand eine Idee, wie man das lösen könnte?
    MFG THWBM
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Am einfachsten registrierst du einen Event-Handler für das Event "onmousemove" in dem du die Mouseposition durch das Event-Objekt zur Verfügung hast…
  4. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    Danke für die schnellen Antworten
    cpurgstaller schrieb:
    http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

    Da kann ich nur finden, wie man die Fenstergröße und die Scrallposition herausfinden kann. Aber wie finde ich heraus, wo die Maus ist?
    cpurgstaller schrieb:
    http://www.html.de/javascript-ajax-und-dhtml/21067-position-des-mauszeigers-ermitteln.html

    Falls du dich auf das hier:
    function doSomething(e) {
        var posx = 0;
        var posy = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)     {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)     {
            posx = e.clientX + document.body.scrollLeft
                + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop
                + document.documentElement.scrollTop;
        }
        // posx and posy contain the mouse position relative to the document
        // Do something with this information
    }

    beziehst, dann erkläre bitte etwas dazu. Ich habe schon viele sehr ähnliche Scripte auf Google gefunden, die teilwese funktioniert habe. Aber ich möchte auch verstehen, warum das Script funktioniert. Ohne erklärung ist es relativ wertlos.
    hackyourlife schrieb:
    Am einfachsten registrierst du einen Event-Handler für das Event "onmousemove" in dem du die Mouseposition durch das Event-Objekt zur Verfügung hast...

    Ich weiß nicht so recht, was du von mir willst. "onmousemove" ist doch ein Event-Handler, oder bin ich gerade total auf den verkehten Dampfer?
    MFG THWBM
  5. Moin,

    da Du eh schon JQuery nutzt, warum nicht auch deren Möglichkeit: http://docs.jquery.com/Tutorials:Mouse_Position

    In der Funktion definierst Du die Bereiche, in denen das div angezeigt werden soll. Sobald die Maus entsprechend in jenen Bereich eindringt, aktivierst Du das div, wenn sie den Bereich verlässt, deaktivierst Du das div.

    Gruß,
    Pawnee
  6. m******e

    thwbm schrieb:
    hackyourlife schrieb:
    Am einfachsten registrierst du einen Event-Handler für das Event "onmousemove" in dem du die Mouseposition durch das Event-Objekt zur Verfügung hast...

    "onmousemove" ist doch ein Event-Handler, oder bin ich gerade total auf den verkehten Dampfer?
    Jain.
    Es muss auch definiert, bzw. zugewiesen werden.

    Beispiel:
    Eine Funktion
    function Mousemove() {...}
    wird dem Ereignis(Event) "onmousemove" zugewiesen:
    document.onmousemove = Mousemove;


    Übrigens:
    Da ich Dich ja so gerne deprimiere :-D hier noch schnell ne Lösung ohne JQuery, wobei sich die Position der InfoBox am Mauszeiger, und Text- und Hintergrundfarbe festlegen lassen.
    Aufgrund der Übersichtlichkeit sind es 2 Funktionen. Musst mal schauen, obs was für Dich ist.

    HTML:
    <html><head><title>InfoText (Tooltip)</title>
    <style type="text/css">
    #InfoBox {display:none; background-color:#B6EAB5; position:absolute; top:0px; left:0px; padding:2px;}
    </style>
    </head><body>
    <div id="InfoBox"></div>
    <h1 onmouseover="Info('Tach. Ich bin eine Überschrift.', 1)" onmouseout="Info(0, 0)">Zeige drauf!</h1>
    <img src="02.gif" alt="" onmouseover="Info('Nur nicht..', 1, '#FFF', '#c0c0c0')" onmouseout="Info(0, 0)">
    <img src="06.gif" alt="" onmouseover="Info('deprimieren lassen!<h1>&nbsp; &nbsp; :P</h1>', 1, '#00FFFF', '#ACAF23')" onmouseout="Info(0, 0)">
    <!-- usw. -->
    </body></html>
    JavaScript:
    var d = document, IB = 'InfoBox';
    function Mousemove (Ereignis) {var left = 20, top = 10;
      if (!Ereignis) Ereignis = window.event;
      if (d.getElementById) {
        d.getElementById(IB).style.left = Ereignis.clientX + left + "px";
        d.getElementById(IB).style.top = Ereignis.clientY + top + "px";
      } else if (d.all) {
        d.all.Springer.style.left = Ereignis.clientX + left;
        d.all.Springer.style.top = Ereignis.clientY + top;
      }
    }
    d.onmousemove = Mousemove;
    
    function Info(Text, Anzeige, color, bcolor) {
      if(!Anzeige) {
        d.getElementById(IB).style.display = 'none';
      } else {
        d.getElementById(IB).style.display = 'block';
    InfoBox.innerHTML = Text
    if (!color){d.getElementById(IB).style.color = '#000'}
    else{d.getElementById(IB).style.color = color;}
    if (!bcolor){d.getElementById(IB).style.background = '#B6EAB5'}
    else{d.getElementById(IB).style.background = bcolor;}
      }
    }

    Recht ausgereift, umfangreich und sehr gut dokumentiert sind übrigens auch die Tooltips von Walter Zorn, der leider nicht mehr unter uns weilt.

    Mit vielen Beispielen und Effekten bestückt, ist seine JavaScript-Bibliothek spielend einfach einbindbar.

    Grüßchen, dat Menschle

    Beitrag zuletzt geändert: 26.12.2012 5:08:25 von menschle
  7. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    Hallo und danke für die Antworten,
    pawnee schrieb:
    da Du eh schon JQuery nutzt, warum nicht auch deren Möglichkeit: http://docs.jquery.com/Tutorials:Mouse_Position

    Weil ich die Möglichkeit noch nicht kannte ;-). Jetzt kenne und benutze ich sie, danke.
    menschle schrieb:
    thwbm schrieb:
    hackyourlife schrieb:
    Am einfachsten registrierst du einen Event-Handler für das Event "onmousemove" in dem du die Mouseposition durch das Event-Objekt zur Verfügung hast...

    "onmousemove" ist doch ein Event-Handler, oder bin ich gerade total auf den verkehten Dampfer?

    Jain.
    Es muss auch definiert, bzw. zugewiesen werden.

    Beispiel:
    Eine Funktion
    function Mousemove() {...}
    wird dem Ereignis(Event) "onmousemove" zugewiesen:
    document.onmousemove = Mousemove;


    Ich verstehe nicht so recht, wozu das gut sein soll.
    menschle schrieb:
    Übrigens:
    Da ich Dich ja so gerne deprimiere :-D hier noch schnell ne Lösung ohne JQuery, wobei sich die Position der InfoBox am Mauszeiger, und Text- und Hintergrundfarbe festlegen lassen.
    Aufgrund der Übersichtlichkeit sind es 2 Funktionen. Musst mal schauen, obs was für Dich ist.

    Im Beispiel funktioniert es, aber als ich mir das mal rauskopiert habe, hat es nicht funktioniert. Die Div-Position war immer die, die die Maus beim laden der Seite hatte. So deprimiert bin ich dann jetz doch nicht, wie du dachtest. Der Schuss ging nach hinten los ;-).

    Ich habe es jetzt auch so hinbekommen:
    html:
    <td onmousemove="Info('Wichtige Nachricht!', 1)" onmouseout="Info('Fehler, bitte lade die Seite neu!', 0)">

    Wenn die Maus über die <td> bewegt wird, wird der Div angezeigt. Wenn die Maus die <td> verlässt, wird er ausgebländet. Sollte der Div auf grund eines fehlers nicht ausgeblendet werden, wir die Aufforderung, die Seite neu zu laden angezeigt.

    Javascript:
    $(document).ready(function() {
    	$(document).mousemove(function(e) {
    		MausX = e.pageX;
    		MausY = e.pageY;
    	});
    });
    function Info(Text, Anzeige) {
    	if(Anzeige == 0) {
    		document.getElementById('InfoBox').style.display = 'none';
    	} else {
    		$(document).ready(function() {
    		
    			document.getElementById("InfoBox").style.left  = MausX + 10;
    			document.getElementById("InfoBox").style.top = MausY + 10;
    				
    			document.getElementById('InfoBox').style.display = 'block';
    			$("#InfoBox").html(Text);
    		});
    	}
    }

    MFG THWBM

    Beitrag zuletzt geändert: 26.12.2012 15:36:59 von thwbm
  8. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    thwbm schrieb:
    var MausAktuallisierenInterval = setInterval(function() {MausAktuallisieren();}, 1);//1x Pro Milisekunde wird die Mausposition aktuallisiert.
    Das ist völlig unnötig! Du rufst so nur ständig eine Funktion auf, die den onmousemove-Eventhandler registriert…

    Richtig wäre es so, also ohne dem Interval:
    $(document).ready(function() {
    	$(document).mousemove(function(e) {
    		MausX = e.pageX;
    		MausY = e.pageY;
    	});
    });
    Grund: der Eventhandler wird sowieso bei jeder Mausbewegung aufgerufen, du musst ihn deshalb nicht ständig neu binden.
  9. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    hackyourlife schrieb:
    thwbm schrieb:
    var MausAktuallisierenInterval = setInterval(function() {MausAktuallisieren();}, 1);//1x Pro Milisekunde wird die Mausposition aktuallisiert.
    Das ist völlig unnötig! Du rufst so nur ständig eine Funktion auf, die den onmousemove-Eventhandler registriert…

    Wo habe ich das getippt? Zeig mir die Textstelle! :-D:-D:-D
    Spaß bei Seite, danke für den Tipp. Du hast recht, ich muss schließlich nicht 1x pro Milisekunde überprüfen, ob die Maus bewegt wurde oder nicht, sondern es reicht, wenn ich bei einer Mausbewegung die Mausposition abfrage.
    MFG THWBM
  10. Hi,

    bin auch grad dabei was mit Mausposition zu basteln und bin fast verrückt geworden, vor allem weil IE wieder andere Werte liefert als Firefox und co. ;)

    Habs so gemacht:

    function mausposermitteln(ev){ //3.)
    if (!ev)
    ev=window.event;
    ...
    //Mausposition innerhalb eines Elements für Firefox und Co.
    alert(ev.layerY+':'+ev.layerX);
    
    //Mausposition in IE wenn gescrollt, da IE hier wieder spezielle Werte ausgibt ^^
    alert(ev.layerY-document.documentElement.scrollLeft+':'+ev.layerY-document.documentElement.scrollTop);
    
    }
    
    function startproove(){ //2.)
    document.getElementById('einelement').onmousemove=mausposermitteln;
    }
    
    window.onload=startproove; //1.)


    Vielleicht kann das ja irgendwer gebrauchen ;)

    Beitrag zuletzt geändert: 27.12.2012 0:06:17 von esadat
  11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!