Geek Answers Handbook

Placing a point on an image - onClick

The user will be able to click on 3 points on the image, and I want to display the BLACK point at these points. Then I will save these values ​​in my database and regenerate the image with these 3 points later.

This is a two-part question:

1.) In my code, I cannot detect the onClick event when the image is clicked. Maybe someone will learn it. Here is my code. JSFIDDLE

  $(document).ready(function () {
      $('body').click(function (ev) {
          alert("d");
          mouseX = ev.pageX;
          mouseY = ev.pageY
          alert(mouseX + ' ' + mouseY);
          var color = '#000000';
          var size = '1px';
          $("body").append(
          $('<div></div>')
              .css('position', 'absolute')
              .css('top', mouseY + 'px')
              .css('left', mouseX + 'px')
              .css('width', size)
              .css('height', size)
              .css('background-color', color));
      });
  });

HTML

<body background="http://www.craigjoneswildlifephotography.co.uk/blog/wp-content/uploads/2010/07/CMJ57311.jpg">

</body>

2.) Tell me that I have the X and Y coordinates of the points and how can I restore the image with these points?

+4
source share
3 answers

document body ( body 0, ):

http://jsfiddle.net/TrueBlueAussie/95vczfve/5/

  $(document).ready(function () {
      $(document).click(function (ev) {
          mouseX = ev.pageX;
          mouseY = ev.pageY
          console.log(mouseX + ' ' + mouseY);
          var color = '#000000';
          var size = '1px';
          $("body").append(
          $('<div></div>')
              .css('position', 'absolute')
              .css('top', mouseY + 'px')
              .css('left', mouseX + 'px')
              .css('width', size)
              .css('height', size)
              .css('background-color', color));
      });
  });

: JSFiddle , body document. body ( document , DOM ):)

, , http://jsfiddle.net/BrianDillingham/95vczfve/7/:

$(document).ready(function(){ 

    $(document).click(function (ev) {        
        $("body").append(            
            $('<div></div>').css({
                position: 'absolute',
                top: ev.pageY + 'px',
                left: ev.pageX + 'px',
                width: '10px',
                height: '10px',
                background: '#000000'
            })              
        );               
    });

});

Brian 3 : http://jsfiddle.net/BrianDillingham/95vczfve/8/

+4

0 , 0.

CSS:

html, body { height: 100%; margin: 0; }

.

jsFiddle

jQuery /:

$(document).ready(function(){
    //  here I asign the event dynamically, not needed for 'body' as such tag should always be present,
    //  but something you should look into
    //  see also: http://api.jquery.com/on/
    $(document).on('click', 'body', function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY
        //  simply press F12 to look at your browsers console and see the results
        console.log('Mouse Position:\t' + mouseX + '|' + mouseY);
        //  no need in JS to write var for every variable declartion,
        //  just seperate with a comma
        var color = '#000000',
            size = '5px';   //  changed size to 5px from 1 just to make it easier to see what going on for you
        //  No need to use $("body") since this event takes place on the body tag
        //  $(this), in an event, always equals the selector the event is tied to
        $(this).append(
            //  making an element with jquery is simple
            //  no need to insert whole tag, all you need is tag name and a closer
            //  like so
            $('<div />')
                //  easily tie all css together
                .css({
                    //  also, in jquery CSS, any css variable with a '-' 
                    //  can be renamed when assigning
                    //  simply remove the '-' and capitilize the first letter of the second word
                    //  like so, here in 'background-color'
                    backgroundColor: color,
                    height: size,
                    left: mouseX + 'px',
                    position: 'absolute',
                    top: mouseY + 'px',
                    width: size
                })
        );
    })
});
+3

, , URL- , http://www.example.com/thingies/someimage.jpg - http://www.example.com/thingies/someimage.jpg?x0=10&y0=25&x1=30&y1=5. , , , (x0, y0, x1 ..)) .

URL- -, URL- , .

, .

My second thought is Local Storage , will save points with the client, but this means that points do not necessarily go to the server, and are read only from the client browser. It also depends on the browser that supports it and allows it. Of course, since 3 coordinates is a fairly small data set, it can be stored in a browser cookie.

+1
source

More articles:


All Articles