Home » Jquery » javascript – Plot coordinates on image using jquery-Exceptionshub

javascript – Plot coordinates on image using jquery-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have image which is display dynamically. For this image i have coordinate value which is already stored in database.Now using this coordinate value i want to mark on image.

Here is my jquery code,

$(document).ready(function () {
$.ajax({
           type: "POST",
           url: "Section.aspx/GetImageData",
           //data: '',
            data: JSON.stringify({ "dataSecName": name }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                   alert("Success");
                   var imgval = JSON.parse(data.d);
                   $.each(imgval, function (i, jsondata) {
                   $("#imgDiv").empty();
                     //console.log(jsondata.ImageName);
                    console.log(jsondata.XCordinate);
                    console.log(jsondata.YCordinate);
                    var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
                    img.attr('src', "../Administration/imageHotspot/" + jsondata.ImageName);
                    img.appendTo('#imgDiv');
                    $("#dynamic").height(500);
                    $("#dynamic").width(500);
   });
});

Here image get display successfully. now i want to use this coordinate value plot on this image.
I have write the code to plot but nothing gets work

  $.each(imgval, function (i, jsondata) {
                            //$("body").append(
                            $("#dynamic").append(
                                  $('<div></div>').css({
                                    position: 'absolute',
                                      top: jsondata.YCordinate + 'px',
                                      left: jsondata.XCordinate + 'px',
                                    //top: event.pageY + 'px',
                                    //left: event.pageX + 'px',
                                    width: '10px',
                                    height: '10px',
                                    background: '#dd4b39',
                                    'border-radius': '10px'
                                })
                            );

                        });
How to&Answer: