一、頁面運行，點擊圖片中的某個點，彈窗提示這個點在圖片中的座標信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片相對座標</title>
</head>
<body>
<div style="position:absolute;top:50px;left:250px;">
<img src="G:\123.png"
οnmοusemοve="vControl('GETMOUSEPOSINPIC',this)" οnclick="haha('GETMOUSEPOSINPIC',this)"/>
</div>
<script language="javascript" type="text/javascript">
var JPos = {};
(function($){
$.$getAbsPos = function(p)
{
var _x = 0;
var _y = 0;
while(p.offsetParent){
_x += p.offsetLeft;
_y += p.offsetTop;
p = p.offsetParent;
}
_x += p.offsetLeft;
_y += p.offsetTop;
return {x:_x,y:_y};
};
$.$getMousePos = function(evt){
var _x,_y;
evt = evt || window.event;
if (evt.pageX || evt.pageY)
{
_x = evt.pageX;
_y = evt.pageY;
}
else if (evt.clientX || evt.clientY)
{
_x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
_y = evt.clientY + document.body.scrollTop - document.body.clientTop;
}
else
{
return $.$getAbsPos(evt.target);
}
return {x:_x,y:_y};
}
})(JPos);
function vControl(pChoice)
{
switch(pChoice){
case "GETMOUSEPOSINPIC":
var mPos = JPos.$getMousePos();
var iPos = JPos.$getAbsPos(arguments[1]);
window.status = (mPos.x - iPos.x) + " " + (mPos.y - iPos.y);
break;
}
}
function haha(pChoice)
{
switch(pChoice){
case "GETMOUSEPOSINPIC":
var mPos = JPos.$getMousePos();
var iPos = JPos.$getAbsPos(arguments[1]);
alert((mPos.x - iPos.x) + " " + (mPos.y - iPos.y));
break;
}
}
</script>
</body>
</html>
二、實時獲取座標位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片相對座標</title>
</head>
<body>
<script type="text/javascript">
var getCoordInDocumentExample = function(){
var coords = document.getElementById("coords");
coords.onmousemove = function(e){
var pointer = getCoordInDocument(e);
var coord = document.getElementById("coord");
coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")";
}
}
var getCoordInDocument = function(e) {
e = e || window.event;
var x = e.pageX || (e.clientX +
(document.documentElement.scrollLeft
|| document.body.scrollLeft));
var y= e.pageY || (e.clientY +
(document.documentElement.scrollTop
|| document.body.scrollTop));
return {'x':x,'y':y};
}
window.onload = function(){
getCoordInDocumentExample();
};
</script>
<div id="coords" style="width:500px;height:200px;background:#F2F1D7;border:2px solid #0066cc;">
請在此移動鼠標。
</div>
<br />
<div id="coord" style="width:500px;border:2px solid #336699;"> </div>
</body>
</html>