2012-10-23 8 views
1

내가하려는 것은 Js 녀석에게는 쉬운 일이지만, 나는 단지 PHP 녀석이다. 나는 지금하고있는 프로젝트에 이것을 필요로한다.이미지의 마우스 클릭 위치

내가하려는 것은 이미지 위에 클릭 좌표를 가져 와서 PHP 스크립트에 게시하여 가치를 얻고 나머지 처리를 할 수있게하는 것입니다. (나는 아약스를 모른다. 그래서 이것이 내가 할 수있는 유일한 방법이다).

코드를 찾았으나 필요한만큼 X와 Y 포인트를 표시합니다. 한 번만 해보고 싶습니다. 열쇠는 type="image"로 설정 유형 속성입니다

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

(단지 HTML과 PHP와)

<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> 
+0

다음을 아약스 게시 스크립트를 통해 PHP에 게시하십시오! – MJQ

답변

1
$("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); 
    });​ 
+0

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

0

나는 당신이 코드를 가지고 수없는 이유 :

document.getElementById("x").value  = PosX; 
document.getElementById("y").value= PosY; 
당신은 이미지의 onclick 이벤트에 e.clientX 및 e.clientY을 얻을 필요가