2017-02-07 7 views
0

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

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script> 
     $(document).ready(function() 
     { 
     $('img').click(function(f) 
     { 
      var offset = $(this).offset(); 
      var X = (f.pageX-offset.left); 
      var Y = (f.pageY-offset.top); 
      var X1=[X]; 
      var Y1=[Y]; 
      $('#display').text('X: ' + X1 + ', Y: ' + Y1); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <img style="width:500px;"src="mouseclick.png"/> 
    <div id="display"> 
    </div> 
    </body> 
</html> 
+0

Можете ли вы показать нам, как ваш вставки/обновления базы данных? – danjbh

+0

Я не знаю, как вставить их в базу данных, где возникает проблема! – Anvesh

+0

Сделайте вызов ajax, в котором хранятся 2 переменные x и y. –

ответ

0

Делая это, вы можете сохранить все клики на каждом Ajax вызова.

$(document).ready(function() { 
 
    $('img').click(function(e) { 
 
    var offset = $(this).offset(); 
 
    var xPoint = e.pageX - offset.left; 
 
    var yPoint = e.pageY - offset.top; 
 
    alert(e.pageX - offset.left); 
 
    alert(e.pageY - offset.top); 
 
    $.ajax({ 
 
     url: "where you want to go example: /Admin/SavePoints", 
 
     type:"POST", 
 
     data:{xAxis:xPoint,yAxis:yPoint }, 
 
     success: function(data){ 
 
     alert("Saved"); 
 
     } 
 
     error: function(){ 
 
     alert("ERROR"); 
 
     } 
 
    }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

Обновлено Fiddle:

$(document).ready(function() { 
 
    var arrayOfXY = new Array(); 
 
    $('img').click(function(e) { 
 
     var offset = $(this).offset(); 
 
     var xPoint = e.pageX - offset.left; 
 
     var yPoint = e.pageY - offset.top; 
 
     arrayOfXY.push({x:xPoint, y:yPoint}); 
 
    }); 
 
    
 
    $(".showCoordinates").on("click",function() { 
 
     for (var i = 0; i < arrayOfXY.length; i++) { 
 
      var x = arrayOfXY[i].x; 
 
      var y = arrayOfXY[i].y; 
 
      alert("x axis:"+x+" and y axis:"+y); 
 
      console.log("x axis:"+x+" and y axis:"+y); 
 
     } 
 
    }); 
 
    
 
    $(".saveCoordinates").on("click",function() { 
 
     $.ajax({ 
 
      url: "Ur url", 
 
      type:"POST", 
 
      data: {coordinates:arrayOfXY}, 
 
      success:function(data){ 
 
       alert("Success"); 
 
      }, 
 
      error: function(){ 
 
       alert("ERROR"); 
 
      } 
 
     }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;"> 
 
<button class="showCoordinates">Show saved coordinates</button> 
 
<button class="saveCoordinates">Save coordinates in DB</button>

+0

@Anvesh Существует другой способ. Вы можете использовать 2D-массив для сохранения координат xy, а затем просмотреть их, используя цикл foreach, а затем сохранить этот массив в целом на сервере. Вы хотите получить ответ? –

+0

да, я хочу, чтобы ты помог! – Anvesh

+0

Конечно, подождать некоторое время, я отправлю ответ –

 Смежные вопросы

  • Нет связанных вопросов^_^