Using div, image and jquery issue inside a tabcontainer

Question

The issue is with the following piece of code and i am not able to figure it out why? The code goeas as this way

.ASPX

 <cc1:TabPanel runat="server" HeaderText="Floor Plan" ID="TabPanelFloorPlan">
        <ContentTemplate>
                        <div id="floorplanContainer">
                        <img id='fplan' src="~/_layouts/card.jpg" usemap="#MyImageMap" />
                        </div>
                        <map id="MyImageMap" name="MyImageMap">
                            <area id='roomArea' shape="poly" coords="0,0,0,0" alt="Meeting Room" />
                        </map>
                        <input id="Submit" type="button" value="Draw" />
                        <input id="clear" type="button" value="Clear" />
        </ContentTemplate>
    </cc1:TabPanel>

Jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
   
<script src="../../Style Library/Styles/jquery.maphilight.js" type="text/javascript"></script>
    <script>
        jQuery(document).ready(function () {
            var points = "";

            $("#floorplanContainer").click(function (e) {
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;

                var pwidth = 2;
                var pheight = 2;

                $("#floorplanContainer").append("<div class='point' style='font-size:0;position:absolute; display:inline; border: 1px solid black; top:" + (y - (pheight / 2)) + "px; left:" + (x - (pwidth / 2)) + "px; width: " + pwidth + "px; height: " + pheight + "px; z-index:100; '> </div>");
                if (points != "") points += ',';
                points += x + "," + y
            });

            $("#clear").click(function () {

                $('.point').remove();
                points = "";
                $('#roomArea').attr('coords', '0,0,0,0');
                $('#fplan').maphilight({ alwaysOn: false });

            });

            $("#Submit").click(function () {

                $('#roomArea').attr('coords', points);
                $('#fplan').maphilight({ alwaysOn: true });

            });
        })
</script>

The issue is as shown in the figure: The points get plotted at some other location on click seems like its plotting with respect to some other container and than the region is shifted at the bottom. Take a look.

enter image description here

I am not able to figure out whys this is happening can anyone help me to sort out the problem?

score 0 · Accepted Answer · edited May 23 '17 at 12:13

I think by using the jquery clientX and clientY properties of the mouse event object, you should get the coordinates from within the viewport. It might be usefull to put the imagemap in a container element.

Two other properties may come in handy: parentX and parentY of the mouse event object. They return the coordinates measured from the top left corner of the screen.

EDIT: clientX and clientY may not be the correct solution. But this answer seems to have a solution: jQuery get mouse position within an element

Using div, image and jquery issue inside a tabcontainer

1 Answers1