jquery how to add pin to image and save the position to SQL

Question

How can I pin an image, and save the position of my pins?

I found this plugin, but I don\'t know how to save the position of these pins.

The idea is like Google

Answer 1

You can use the jQuery mouse position to know where you've added a pin and shove these vars into your sql database.

$("#special").click(function(e){
      $('#imgId').html(e.pageX +', '+ e.pageY);
   }); 

The tricky part is getting the jquery vars to php (Resources below) so you're sql should look something similar like this:

user_id - pin_id - positionX - positionY

Resources:

Mouse position: http://docs.jquery.com/Tutorials:Mouse_Position

Passing jquery to php: http://www.sitepoint.com/forums/showthread.php?650046-Passing-Jquery-Var-To-Php-Mysql-Query

Hope this helps you!

EDIT DUE TO FIRST COMMENT ON THIS POST:

You can simply add a new image when you click and give it a style along with it just like this:

$("#imageDiv").click(function (e) {
     $(this).addImage($(this), e.pageX, e.pageY);
});


function addImage(object, xPos, yPos){
     object.append("");     
}

PS: your object div should be set to position: relative & not sure if this will work, this is written without testing the code, some changes may be needed!