giusto per darti un esempio funzionante, copia e incolla
codice:
<!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" lang="it" xml:lang="it">
<head>
<script type="text/javascript">
// <![CDATA[
function getEventMousePos(el, e) {
var iScrollX = document.body.scrollLeft || document.documentElement.scrollLeft;
var iScrollY = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.event;
if (e.currentTarget) {
var pos = getElementPos(el);
return {
x : e.clientX - pos.x + iScrollX,
y : e.clientY - pos.y + iScrollY
}
}
return {
x : e.offsetX,
y : e.offsetY
}
}
function getElementPos(el) {
var x = el.offsetLeft;
var y = el.offsetTop;
var parent = el.offsetParent;
while (parent) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
return {
x : x,
y : y
}
}
window.onload = function() {
/* crei un riferimento al contenitore */
var tuocontenitore = document.getElementById('cnt');
/* all'evento 'mousemove' sul contenitore ricavi le coordinate */
tuocontenitore.onmousemove = function(e) {
var coords = getEventMousePos(tuocontenitore, e);
document.getElementById('coordx').value = coords.x;
document.getElementById('coordy').value = coords.y;
}
}
// ]]>
</script>
</head>
<body>
<div style="width: 500px; height: 300px; background: #f4f4f9; position: relative;" id="cnt">
x: <input type="text" id="coordx" />
y: <input type="text" id="coordy" />
</div>
</body>
</html>
Ciao