Javascript获得图片中的一点相对于图片左上角的坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
function Show(el){
var x = parseInt(document.getElementById('xxx').value)-el.offsetLeft;
var y = parseInt(document.getElementById('yyy').value)-el.offsetTop;
x = "X:"+x;
y = "Y:"+y;
alert(x+","+y);
}
</script>
</head>
<body>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
<img id="imgPic" src="CPU.jpg" onclick="Show(this)" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
function Show(el){
var x = parseInt(document.getElementById('xxx').value)-el.offsetLeft;
var y = parseInt(document.getElementById('yyy').value)-el.offsetTop;
x = "X:"+x;
y = "Y:"+y;
alert(x+","+y);
}
</script>
</head>
<body>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
<img id="imgPic" src="CPU.jpg" onclick="Show(this)" />
</body>
</html>
