I'm trying to create a little overlay next to the mouse cursor that shows the coordinates of the cursor vs. the upper left corner of the image the mouse is on. I'm almost there: it kind of works, but there are still some problems.
When I scroll (either with the mouse wheel or with the scroll bars on the side) the overlay and the cursor get far apart from each other: the overlay moves with the page and the cursor stays still relative to the monitor. I already tried "onscroll" but it does not work
I used "onmouseover" and "onmouseout" function for the images in the page, but for some reason they are only executed ONCE, when the page is loaded.
When I put the mouse on the upper left corner of the image, I'd like to see
0,0as the coordinates. The X is actually 0, but the Y is actually -15. For some reason the coordinates of the image are 15 pixel below the upper edge. No idea why.
OK, now that I mentioned the problems, here is my code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="main2008.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="Ext/mcs2.js"></script></head>
</head>
<body>
<div id="content">
<h1>JS test</h1>
<img src = "pic.jpg">
</div>
</body>
</html>
CSS
#xy {
font-size:10px;
position: absolute;
top: 0px;
right:0px;
width:60px;
visibility: visible;
color:#006699;
background-color:#ffffff;
border: 1px solid #66ccff;
z-index: 10;
padding:7px;
}
JS
var myX, myY, xyOn, myMouseX, myMouseY, ImgX, ImgY, Active;
//For each image, set onmouseover and onmouseout to the functions that activate and deactivate
$(document).ready(function() {
$("img").each(function(i) {
this.onmouseover = getcoordinates(this);
this.onmouseout = deactivate(this);
});
});
//Creation of new div is inside window.onload because it needs to be done when body already exists
window.onload = function(){
var divg = document.createElement("div");
divg.setAttribute('id',"xy");
divg.appendChild(document.createTextNode("New DIV"));
document.body.appendChild(divg);
};
function getcoordinates(object) {
ImgX=object.offsetLeft;
ImgY=object.offsetTop;
//document.getElementById('xy').style.visibility='visible';
Active=1;
alert("Acti"); //This pop-up is just for debugging
}
function deactivate(object) {
//document.getElementById('xy').style.visibility='hidden';
alert("Deacti"); //This pop-up is just for debugging
Active=0;
}
document.onmousemove=getXYPosition; //THIS IS THE KEY FUNCTION!!! And it works
window.onscroll=getXYPosition; //I tried this to fix the scrolling problem, but it does not work
// Cursor coordinate function
xyOn = true;
function getXYPosition(e){
if (1==1) { //Instead of "1==1" I had written "Active==1", but it does not work at all
myMouseX=(e||event).clientX-ImgX;
myMouseY=(e||event).clientY-ImgY;
if (myMouseX + 100 > document.documentElement.clientWidth) {
myX = myMouseX - (myMouseX + 80 - (document.documentElement.clientWidth));
} else {
myX = myMouseX + 20;
}
if (myMouseY + 64 > document.documentElement.clientHeight) {
myY = myMouseY - (myMouseY + 44 - (document.documentElement.clientHeight));
} else {
myY = myMouseY + 20;
}
if (document.documentElement.scrollTop > 0) {
myY = myY + document.documentElement.scrollTop;
myMouseY = myMouseY + document.documentElement.scrollTop;
}
document.getElementById('xy').style.top = myY + "px";
document.getElementById('xy').style.left = myX + "px";
document.getElementById('xy').innerHTML = "X is " + myMouseX + "<br />Y is " + myMouseY;
document.getElementById('xy').innerHTML = document.getElementById('xy').innerHTML;
if (xyOn) {
document.getElementById('xy').style.visibility = "visible";
} else {
document.getElementById('xy').style.visibility = "hidden";
}
}
}
PS: In case you're wondering why I add the overlay div and set the properties with JS rather than HTML, the reason is that when I manage to make the JS code at some point this will become a Chrome extension, which means I can inject JS and CSS into the page, but no HTML.
