在图片上点击某点，然后获取该点相对于该图片的坐标，该怎么做

Question

在图片上点击某点，然后获取该点相对于该图片的坐标，该怎么做

Answer 1

offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 

Answer 2

<img src="img/menu-fouce-down_03.gif" style="width:100px;height:100px;" onclick="getPos(this,event);"/>
    <script type="text/javascript">
        function getPos(o,e){
            //alert(o.offsetLeft+":"+o.offsetTop);
            alert(e.offsetX+":"+e.offsetY);
        }
    </script>

Answer 3

老大 我想说的是非IE浏览器用的似乎不是offsetX和offsetY吧我之前一直用这个函数。楼主参考function getElementX(e) {
   return (e && e.layerX) || window.event.offsetX;
}function getElementY(e) {
   return (e && e.layerX) || window.event.offsetY;
}

Answer 4

这样试试：<script type="text/javascript">
var bStart=false, o=null,coords='',x=0,y=0;
function $(id){return document.getElementById(id);}
function trackcoords(e){
  e=e||window.event;
  if(bStart){    
    if(e.pageX || e.pageY){coords=e.pageX+','+e.pageY;o.value +=o.value==''?coords:'|'+coords;  return;}
    coords=e.clientX+','+e.clientY;    o.value +=o.value==''?coords:'|'+coords
  }
}
function imgload(){
  var src='',img=null;
  img=document.createElement("img");
  img.style.display="none";
  img.onmousedown=function(){  bStart=true;trackcoords() }
  img.onload=function(){
    this.style.display="block";
    this.onload=null;
 }
  img.src='XXXX.gif';
  $("imgcontainer").appendChild(img)
}document.onmouseup=function(){bStart=false;}
window.onload=function(){ o=$('coords');imgload()}
</script> 
<div id='imgcontainer'></div>
<textarea id='coords' cols=90 rows=30  onmousedown='bStart=false' style='display:'></textarea>