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 >

转载于:https://www.cnblogs.com/Ferry/archive/2009/08/19/1549955.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值