Image Hot Spot Based on Database Value

Question

User-1241097802 posted

I have one table which contain information of image coordinate. 

Now when i run other page and try to display in the image display perfectly but i want the Spot/Marker on specific position as well. As value store in the Database.

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

select mhp.ImageName,mhp.HotSpotID,imgdetail.XCordinate,imgdetail.YCordinate
		from tbl_SOAPDetailsInfo e inner join  M_ImageHotSpot mhp on e.ImgHotSpotName=mhp.ImgHotSpotNameByUser 
		inner join M_ImageHotSpotDetail imgdetail on mhp.HotSpotID=imgdetail.HotspotIDFK where e.SOAP_D_Name='New Temp Bt'

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

Answer 1

User-719153870 posted

Hi Programming and Design,

Programming and Design

i want the Spot/Marker on specific position as well.

Could not truly understand the requirement, you want to show the spot value in your aspx page? Where is the specific postion you mentioned?

If so, just do what you've done to the ImageName.

If i misunderstood, can you provide a more detailed description about your requirement? Provide more code about your current project so we can understand the problem better.

Best Regard,

Yang Shen

Answer 2

User-1241097802 posted

@Yang Shen thank you for your reply sir. I have Edited my code. Now using jquery i am fetching the data. But the Marker is not place as perfect position. Sorry for my english and i am fresher too so try to complete my task in any manner. 

Answer 3

User-719153870 posted

Hi Programming and Design,

But the Marker is not place as perfect position.

I built a demo and reproduced the problem, but it's not clear if we met the same problem, when you say "not place as perfect position", do you mean it's at a similar place but not accurate or do you mean it's ar a totally different place which seems has nothing to do with the Cordinates you provide?

In my case, you can see below image which is the second situation i mentioned above:

Then i added the position: 'absolute' style to the marker and it seems works well now:

Below is the complete code of that demo:

aspx:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            name = "RightEye";
            $.ajax({
                type: "POST",
                url: "ImageSpotDemo.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', "files/" + jsondata.name+".jpg");
                        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',
                                position: 'absolute',
                                //top:'186'+'px',
                                //left:'374'+'px',
                                //top: event.pageY + 'px',
                                //left: event.pageX + 'px',
                                width: '10px',
                                height: '10px',
                                background: '#dd4b39',
                                'border-radius': '10px'
                            })
                        );

                    });

                }

            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="imgDiv">
            </div>
        </div>
    </form>
</body>
</html>

.cs:

[WebMethod]
        public static string GetImageData(string dataSecName)
        {
            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["dbConString"].ConnectionString))
            {
                conn.Open();
                string sql = "select * from Spot where name = '"+dataSecName+"'";
                SqlDataAdapter ad = new SqlDataAdapter(sql, conn);
                DataSet ds = new DataSet();
                ad.Fill(ds, "Spot");
                DataTable dt = new DataTable();
                dt = ds.Tables[0];
                string JSONString = string.Empty;
                JSONString = JsonConvert.SerializeObject(dt);
                return JSONString;
            }
        }

sql:

create table Spot(name varchar(50),XCordinate int,YCordinate int)

insert into Spot values('RightEye',186,374),('Left Eye',420,374),('Center of Face',300,314)

select * from Spot 

I noticed that you have tried this position: 'absolute' before at a wrong place maybe, in my opinion, you should have tried to put it in the creating element css :D.

Best Regard,

Yang Shen

Answer 4

User-1241097802 posted

Thank you sir it is working.