Capturing cursor position in javascript inline with element
I am trying to make a div popup next to the mouse when a table cell is hovered over.
<td onmouseover="bubblePopup("param1","param2");">This is the cell</td>
Is it possible to get the cursor position with my bubblePopup function.
function bubblePopup(param1, param2){
var newdiv = document.createElement('div');
newdiv.setAttribute('id', param1);
newdiv.style.width = "200px";
newdiv.style.height = "80px";
newdiv.style.position = "absolute";
newdiv.style.left = cursorX + "px";
newdiv.style.top = cursorY + "px";
newdiv.innerHTML = "content";
document.body.appendChild(newdiv);
}
开发者_如何学Go
I would prefer native javascript(but will consider jquery options too). It only needs to work in Firefox 3.5 and up.
I slapped together a fiddle that might get you on the right track.
http://www.jsfiddle.net/dduncan/WccJw/2/
(Edited to pretty it up slightly)
http://jsfiddle.net/CtCXE/
var td = document.getElementById("thetd");
td.onmouseover = function(e){bubblePopup(e, 'param1','param2')};
function bubblePopup(e, param1, param2){
var newdiv = document.createElement('div');
newdiv.setAttribute('id', param1);
newdiv.style.width = 200;
newdiv.style.height = 80;
var cursorX = e.pageX,
cursorY = e.pageY;
newdiv.style.position = "absolute";
newdiv.style.left = cursorX + 'px';
newdiv.style.top = cursorY + 'px';
newdiv.innerHTML = "content";
document.body.appendChild(newdiv);
}
精彩评论