鼠标点击图片上的位置

我想做的事情应该很容易为一个Js的家伙，但我只是一个PHP的家伙（只是一个起动器）。我需要这个来做一个我现在正在做的项目。鼠标点击图片上的位置

我想要做的是，获取图片上的点击坐标并将其发布到php脚本中，以便我可以获取值并执行其余的处理。（我不知道阿贾克斯，所以这是我能做到的唯一方法，我想）。

我找到了一个代码，但是这显示了X和Y点的次数。我希望它能够工作一次。

<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> 
<img src="newapp.jpg" alt="" id="myImgId" height="300" width="400"><p>Click on the image to get the coordinates.</p> 


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

来源

2012-10-23 Kishor

你需要得到e.clientX和e.clientY在图像onclick事件，然后通过ajax后脚本在PHP中发布它们！ – MJQ

你甚至可以做到无javascript（只是HTML和PHP）

<?php 
    $foo_x=$_POST['foo_x']; 
    $foo_y=$_POST['foo_y']; 
    echo "X=$foo_x, Y=$foo_y "; 
?> 
<form action='' method=post> 
    <input type="image" alt=' Finding coordinates of an image' src="xy-coordinates.jpg" name="foo" style=cursor:crosshair;/> 
</form>

的关键是类型属性设置为type="image"。

来源和演示：http://www.plus2net.com/php_tutorial/php_image_coordinates.php

来源

2012-10-23 13:13:09 Nippey

我会将其称为最佳答案！ :) – Kishor

我的荣幸！ ;） – Nippey

$("image").click(function(e){ 
     var pageCoords = "(" + e.pageX + ", " + e.pageY + ")"; 
     var clientCoords = "(" + e.clientX + ", " + e.clientY + ")"; 
     $("span:first").text("(e.pageX, e.pageY) : " + pageCoords); 
     $("span:last").text("(e.clientX, e.clientY) : " + clientCoords); 
    });

来源

2012-10-23 13:16:45 brightboy2004

http://api.jquery.com/mousemove/ – brightboy2004

为什么我不能有这个代码到你：

document.getElementById("x").value  = PosX; 
document.getElementById("y").value= PosY;

来源

2013-05-14 13:48:00

鼠标点击图片上的位置

回答

相关问题