JS Mausposition ermitteln
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
anzeige
beispiel
bereich
blocken
code
dampfer
dank
display
ereignis
funktion
http
info
laden
maus
objekt
position
sprache
text
url
-
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
Kontainer an der Maus einzublenden, wenn diese über einem bestimmten Teil der Seite ist.<div>
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
mit CSS auf<div id="InfoBox">
gestellt.display:none;
Hat jemand eine Idee, wie man das lösen könnte?
MFG THWBM -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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…
-
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 -
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 -
thwbm schrieb:
Jain.
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?
Es muss auch definiert, bzw. zugewiesen werden.
Beispiel:
Eine Funktion
wird dem Ereignis(Event) "onmousemove" zugewiesen:function Mousemove() {...}document.onmousemove = Mousemove;
Übrigens:
Da ich Dich ja so gerne deprimiere
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> :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 -
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
wird dem Ereignis(Event) "onmousemove" zugewiesen:function Mousemove() {...}document.onmousemove = Mousemove;
Ich verstehe nicht so recht, wozu das gut sein soll.
menschle schrieb:
Übrigens:
Da ich Dich ja so gerne deprimiere 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 -
thwbm schrieb:
Das ist völlig unnötig! Du rufst so nur ständig eine Funktion auf, die den onmousemove-Eventhandler registriert…
var MausAktuallisierenInterval = setInterval(function() {MausAktuallisieren();}, 1);//1x Pro Milisekunde wird die Mausposition aktuallisiert.
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. -
hackyourlife schrieb:
thwbm schrieb:
Das ist völlig unnötig! Du rufst so nur ständig eine Funktion auf, die den onmousemove-Eventhandler registriert…
var MausAktuallisierenInterval = setInterval(function() {MausAktuallisieren();}, 1);//1x Pro Milisekunde wird die Mausposition aktuallisiert.
Wo habe ich das getippt? Zeig mir die Textstelle!
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 -
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
