locked
HotSpot Not place on specific coordinate - Style Problem in Jquery RRS feed

  • Question

  • User-1241097802 posted

    I have table in which the X and Y coordinate value store.

    XCordinate	YCordinate	HotSpotDescription
    186 	        374 	        Right Eye
    420 	        374 	        Left Eye
    300 	        314	        Center of Face

    Now when i fetch the data all the data using web method i get image and coordinate value. 

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

    But the marker is not shown one the specific location. The Marker shows on other location

    Edit Code 1

    <script type="text/javascript">
            $(document).ready(function () {
    
                function getUrlParameter(name) {
                    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
                    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
                    var results = regex.exec(location.search);
                    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
                };
                //Main Part Start
                var urlName = getUrlParameter('QSecName');
                //alert(urlName);
                getImageData(urlName);
                function getImageData(name) {
    
                    // alert(nextDay);
                    $.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);
                               // $("#dynamic").position("relative");
                            });
    
                            $("#imgDiv").css({
                                //position: 'relative'
                            });
    
                            $.each(imgval, function (i, jsondata) {
                               $("body").append(
                                //$("#imgDiv").append(
                                //$("#dynamic").append(
                                      $('<div></div>').css({
                                          position: 'absolute',
                                          top: jsondata.YCordinate + 'px',
                                          left: jsondata.XCordinate + 'px',
                                          //top:'186'+'px',
                                          //left:'374'+'px',
                                        //top: event.pageY + 'px',
                                        //left: event.pageX + 'px',
                                        width: '10px',
                                        height: '10px',
                                        background: '#dd4b39',
                                        'border-radius': '10px'
                                    })
                                );
    
                            });
    
                        }
    
                    });
                }
    
                <%--$("#<%= imgDiv.ClientID %>").on("click", function (event) {--%>
                $("#imgDiv").on("click", function (event) {
                    var offset = $(this).offset();
                    var x = "186";
                    var y = "374";
                    $.ajax({
    
                        type: "POST",
    
                        url: "Section.aspx/GetCordiData",
    
                        //data: '',
                        data: JSON.stringify({ 'xGet': x, 'yGet': y }),
    
                        contentType: "application/json; charset=utf-8",
    
                        dataType: "json",
    
                        success: function (data) {
    
                            //alert("Success");
                            //console.log(data);
                            var imgcordival = JSON.parse(data.d);
                            $.each(imgcordival, function (i, jsondata) {
                                var n = CKEDITOR.instances['<%= txtDescription.ClientID %>'].getData() + jsondata.HotSpotDescription;
                                //alert(n);
                                <%--alert(CKEDITOR.instances['<%= txtDescription.ClientID %>'].getData());--%>
                                CKEDITOR.instances['<%= txtDescription.ClientID %>'].setData(n);
                            });
                          
                        }
    
                    });
                });
                //Image Click End
                //Main Document Start Ending
            });
                          
            function GetCheckStatus() {
                var srcControlId = event.srcElement.id;
                var targetControlId = event.srcElement.id.replace('chkIs', 'txtLookValue');
                if (document.getElementById(srcControlId).checked) {
                    document.getElementById(targetControlId).disabled = false;
                }
                else {
                    document.getElementById(targetControlId).disabled = true;
                }
            }
            function button_click(objTextBox, objBtnID) {
                if (window.event.keyCode == 13) {
                    document.getElementById(objBtnID).focus();
                    document.getElementById(objBtnID).click();
                    return false;
                }
            }
        </script>

    Sunday, February 16, 2020 7:04 PM

All replies

  • User1535942433 posted

    Hi Programming and Design,

    Accroding to your description and codes,could you tell us what is the marker?

    Could you post your full codes and the picture of your current result?It will help us solve your problem more faster.

    Best regards,

    Yijing Sun

    Monday, February 17, 2020 7:38 AM
  • User-1241097802 posted

    Problem Image 

    Marker means HotSpot, On image based on X and Y coordinate I want Hotspot  and when i click on it i want to fetch the  "HotSpotDescription". I have specified the image url. please click on it. As well as i have edited my question in Edit code 1 i have specify my full script code.

    Monday, February 17, 2020 8:33 AM