下面的代码在页面标题中。 GetCoordinates函数使用window.event方法查找单击鼠标时的坐标。 它还需要考虑任何滚动和图像在文档中的位置,以便坐标始终相对于图像的左上角。 FindPosition函数查找图像标签在页面中的位置。 不同的浏览器以略有不同的方式定义元素的位置,但是此方法在Internet Explorer和Firefox中都可以使用。
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<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>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
以下代码位于HTML正文中。 图像需要在代码中使用的ID。 Javascript定义了当按下鼠标事件触发时将运行的功能。 跨度块用于显示坐标。
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<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>
![复制代码](https://common.cnblogs.com/images/copycode.gif)