Using the code
onMouseMove event of the HTML '
document.onmousemove = getMouseCoordinates;
Within the function "
getMouseCoordinates", the following code snippet will calculate the mouse coordinates dynamically:
MOUSE_X = event.clientX - document.body.scrollLeft;MOUSE_Y = event.clientY - document.body.scrollTop;
Now, I will discuss about the popup window. Create a popup window object like:
var oPopup = window.createPopup();
The following code snippet demonstrates the use of the popup object. The code creates a pop-up window and displays it.
var val = id.innerText
var PopBody = oPopup.document.body;
PopBody.style.backgroundColor = "lightcyan";
PopBody.style.border = "solid black 1px";
var text = val + " - Use it anywhere you want";
PopBody.innerHTML = "<font color=red size=2pt face=verdana>" +
text + "</font>"
oPopup.show(MOUSE_X + 5, MOUSE_Y -5,300,20, document.body);
If you want to show a static menu window on any mouse event, you can follow the same way as I did in my code. I have taken a
<DIV> whose ID is
STYLE="display:none;", within which I have created an HTML menu. The inner-html of this hidden
<DIV> would be the body of the popup menu window. The following code will show the popup menu:
<DIV id="oContextHTML" ......>
var innerHTML = oContextHTML.innerHTML;
var leftX = MOUSE_X+5;
var topY = MOUSE_Y+5;
oPopup.document.body.style.backgroundColor = "lightcyan";
oPopup.document.body.innerHTML = innerHTML;
oPopup.show(leftX, topY, 300, 87, document.body);
This is a very simple and easy to use code.