获取鼠标点击的坐标！！！！！求助！

MicroDeviser 2009-08-19 02:42:44

有一张图片，要求鼠标在这张图片上任何地方点击后，
得到相对这个图片的左上角的鼠标所在的X，Y 坐标？
注意不是相对于窗口的啊！求代码！！！！！

因为用户要可以处定义这张图片的热点



<img style="border-style: none;" usemap="#helloworld" src="http://static.cnblogs.com/images/a4/tarena.png" alt="" />



<map id="helloworld" name="helloworld">

<area title="hole1" shape="rect" coords="0,37,76,162" href="http://blog.sina.com.cn/xuzhiyong" target="_blank"></area>

<area title="hole2" shape="rect" coords="79,36,181,163" href="http://baike.baidu.com/view/1669218.htm" target="_blank"></area>

<area title="hole3" shape="rect" coords="187,97,341,306" href="http://laiquziyou.blogbus.com/" target="_blank"></area>

<area shape="default"></area>

</map>

...全文

286 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

meditatorx 2009-08-19

打赏
举报

如果图片的大小不能确定的话，那要按照鼠标所在位置的比例来算吧

IHandler 2009-08-19

打赏
举报

改进了一下alert字符串：



<!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>

IHandler 2009-08-19

打赏
举报



<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="Default3.aspx.cs" Inherits="Default3" %>



<!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 runat="server">

    <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){

    alert(parseInt(document.getElementById('xxx').value)-el.offsetLeft);

    alert(parseInt(document.getElementById('yyy').value)-el.offsetTop);

  }

  

</script>



</head>

<body>

    <form id="form" runat="server">

    X:<input id="xxx" type="text" />  Y:<input id="yyy" type="text" />

    <img id="imgPic" src="CPU.jpg" onclick="Show(this)" />

    </form>

</body>

</html>

MicroDeviser 2009-08-19

打赏
举报

嗯，楼上两位谢谢，先试试

zyug 2009-08-19

打赏
举报

....event.x与event.y
这个就是鼠标的
再用递归求图片的offset.x与offset.y,

二者比较就可以了呀

txg92 2009-08-19

打赏
举报

//获取图片的横坐标
function getDimX(el){
for (var lx=0;el!=null;
lx+=el.offsetLeft,el=el.offsetParent);
return lx;
}
//获取图片的纵坐标
function getDimY(el){
for (var ly=0;el!=null;
ly+=el.offsetTop,el=el.offsetParent);
return ly;
}

参数el是图片对象

lvsh870228 2009-08-19

打赏
举报

对于java和.net我不知道有没有这中取鼠标点击事件坐标的事件，动态获取坐标考虑的东西很多，如图片放大缩小后热点区域不变形等......

IHandler 2009-08-19

打赏
举报

如果是windows app 就简单多了 - -

lvsh870228 2009-08-19

打赏
举报

这个可以用js做，或者更偏点用flex也可以实现，但是代码量会很大的！

MicroDeviser 2009-08-19

打赏
举报

再说上面给的那段代码的coords="0,37,76,162" 中的坐标是相对于图片来说的

MicroDeviser 2009-08-19

打赏
举报

[Quote=引用 5 楼 ihandler 的回复:]
可以让用户点击两个对角点，然后计算出水平和垂直距离，再做热点
[/Quote]

你是指先点击图片对角吗？没用的，这个图片是由用上传的，而且，在界面显示的时候，图片的位置可能会发生变化的

IHandler 2009-08-19

打赏
举报

可以让用户点击两个对角点，然后计算出水平和垂直距离，再做热点

MicroDeviser 2009-08-19

打赏
举报

[Quote=引用 2 楼 ihandler 的回复:]
参考
[/Quote]

没什么用，

MicroDeviser 2009-08-19

打赏
举报

[Quote=引用楼主 microdeviser 的回复:]
有一张图片，要求鼠标在这张图片上任何地方点击后，
得到相对这个图片的左上角的鼠标所在的X，Y 坐标？
注意不是相对于窗口的啊！求代码！！！！！

因为用户要可以处定义这张图片的热点

HTML code<imgstyle="border-style: none;" usemap="#helloworld" src="http://static.cnblogs.com/images/a4/tarena.png" alt=""/><mapid="helloworld" name="helloworld"><areatitle="hole1" shape="rect" coords="0,37,76,162" href="http://blog.sina.com.cn/xuzhiyong" target="_blank"></area><areatitle="hole2" shape="rect" coords="79,36,181,163" href="http://baike.baidu.com/view/1669218.htm" target="_blank"></area><areatitle="hole3" shape="rect" coords="187,97,341,306" href="http://laiquziyou.blogbus.com/" target="_blank"></area><areashape="default"></area></map>
[/Quote]

那你靠诉我怎么获得图片所在窗口中的左上角坐标啊

IHandler 2009-08-19