使用Javascript查找图像上的坐标

下面的代码在页面标题中。 GetCoordinates函数使用window.event方法查找单击鼠标时的坐标。 它还需要考虑任何滚动和图像在文档中的位置，以便坐标始终相对于图像的左上角。 FindPosition函数查找图像标签在页面中的位置。 不同的浏览器以略有不同的方式定义元素的位置，但是此方法在Internet Explorer和Firefox中都可以使用。

<script type="text/javascript">
<!--

function FindPosition(oElement)
{
  if(typeof( oElement.offsetParent ) != "undefined")
  {
    for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent)
    {
      posX += oElement.offsetLeft;
      posY += oElement.offsetTop;
    }
      return [ posX, posY ];
    }
    else
    {
      return [ oElement.x, oElement.y ];
    }
}

function GetCoordinates(e)
{
  var PosX = 0;
  var PosY = 0;
  var ImgPos;
  ImgPos = FindPosition(myImg);
  if (!e) var e = window.event;
  if (e.pageX || e.pageY)
  {
    PosX = e.pageX;
    PosY = e.pageY;
  }
  else if (e.clientX || e.clientY)
    {
      PosX = e.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
      PosY = e.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
    }
  PosX = PosX - ImgPos[0];
  PosY = PosY - ImgPos[1];
  document.getElementById("x").innerHTML = PosX;
  document.getElementById("y").innerHTML = PosY;
}

//-->
</script>

以下代码位于HTML正文中。 图像需要在代码中使用的ID。 Javascript定义了当按下鼠标事件触发时将运行的功能。 跨度块用于显示坐标。

<img id="myImgId" alt="" src="red.gif" width="400" height="300" />

<script type="text/javascript">
<!--
var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;
//-->
</script>

<img src="red.gif" width="400" height="300" alt="" id="myImgId" />
<p>X:<span id="x"></span></p>
<p>Y:<span id="y"></span></p>