Как захватить местоположение курсора мыши над моим загруженным изображением в html и php?

Question

Я просто хочу написать текст над своим загруженным изображением. Я использую только html и php. Для этого я пытаюсь сохранить позицию курсора мыши, когда пользователь нажимает на изображение, чтобы написать свой текст. Я пробовал эти вещи ниже. Он показывает ошибку в моем click.php.

1. index.php

   <form action="click.php" method="post" enctype="multipart/form-data"> 
       <h3>Select image to upload:<br/></h3> 
       <input type="file" name="fileToUpload" id="fileToUpload" accept="image/*"/> 
       <input type="submit" value="Upload Image" name="submit"/> 
   </form> 
   

2. click.php

   <script> 
       function getPos(e){ 
        x=e.clientX; 
        y=e.clientY; 
        cursor="Your Mouse Position Is : " + x + " and " + y ; 
        document.getElementById("displayArea").innerHTML=cursor 
       } 
   
       function stopTracking() { 
        document.getElementById("displayArea").innerHTML=""; 
       } 
       </script> 
   
       <div id="focusArea" onmousemove="getPos(event)" onmouseout="stopTracking()"> 
       <?php 
        $target_dir = "uploads/"; 
        $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); 
         //Set the Content Type 
        header("Content-type: image/png"); 
         #dispaly the image 
        $file = $_POST['file']; 
        echo file_get_contents($file); 
       ?> 
       </div> 
       <p id="displayArea"></p> 
   

Answer 1

Пожалуйста, попробуйте этот

$(document).ready(function(e) { 
    $('#A').click(function(e) { 
     alert(e.pageX+ ' , ' + e.pageY); 
    });  
}); 

DEMO