2

問題は次のコードにあり、その理由を理解できませんか? コードは次のようになります

.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>

Jクエリ

<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>

問題は図に示すとおりです。クリックすると、ポイントが他の場所にプロットされ、他のコンテナに対してプロットされているように見え、領域が下部に移動します。見てください。

ここに画像の説明を入力

なぜこれが起こっているのか理解できません。誰かが問題を解決するのを手伝ってくれますか?

4

1 に答える 1

0

マウスイベントオブジェクトのjqueryclientXプロパティとclientYプロパティを使用することで、ビューポート内から座標を取得する必要があると思います。イメージマップをコンテナ要素に配置すると便利な場合があります。

他の2つのプロパティが役立つ場合があります。マウスイベントオブジェクトのparentXとparentYです。画面の左上隅から測定された座標を返します。

編集：clientXとclientYは正しい解決策ではない可能性があります。しかし、この答えには解決策があるようです：jQueryは要素内のマウスの位置を取得します

于 2012-09-23T09:21:14.217 に答える