Javascript JS：如何查找元素'；在不同的计算机上，屏幕上的位置是否不同？

我有一个

13x20

矩阵，每个单元格包含一个介于0到300之间的数字。每个数字代表不同的分幅，因此可以从该矩阵构建地图

除此之外，我还有一个“英雄”角色——一张可移动的照片。按箭头时，它会朝该方向移动。有些瓷砖是这样的，英雄可以行走，而有些则不行。为了知道我的英雄能走到哪里，我希望在他做的每一个动作中，我都能知道他在矩阵中的哪个单元。如果他在一些人之间，我会选择他主要在的人（例如，如果英雄的三分之一在手机上，其余的在手机上，我还是会说他在手机上）。因此，我使用

document.getElementById（“man”）.style.top进行了检查（其中“man”是我的“英雄”的id）。如果它在98和48之间，我认为行是0，如果它在99和151之间，它是行1，依此类推，我对
document.getElementById（“man”）.style.right做了同样的事情。一切都很顺利！直到……我复制了我的文件并继续在另一台计算机上处理它们。发生了四件事：

到目前为止，我使用IE，当用Chrome打开我的
.html
文件时，一些瓷砖图片没有显示出来。我查了一下原因——在Chrome上，它似乎在寻找具有不同名称的图片。例如，我有一张名为
‏黄色\草\圆形\顶部\右侧.bmp
。在Chrome上，当按下inspect elements时，它似乎在寻找一张名为
þþ的图片‏黄色的_草_圆的_顶_右。bmp
，我不知道“þþ”在哪里‏" 我不知道为什么它会在图片的名字前加上这些“þ”，我仔细检查了一下，以确保我没有想象中的事情

用IE打开它，20个瓷砖-这应该需要一行-需要一行半。我必须
CTRL-
七次（！）才能全部在同一行上。在chrome上，它在同一行上，没有任何缩放（放大或缩小）

用IE打开它显示了所有的平铺，但是右和顶部属性有问题。看起来从右边开始的x像素现在是x+像素。我想这是因为屏幕大小和分辨率的不同，但是有没有办法确保它不会从一个屏幕变到另一个屏幕

另一件事是Chrome上的pos与IE中的pos不同！在我在IE上按住CTRL-
键七次之后，终于能够看到它们线条上的瓷砖，我刷新了，并且可以像我在第3节中提到的那样，以右上方的差异行走，我根据我的代码检查了我现在在哪个单元格，然后在Chro上检查了我得到了一个不同的答案。所以我认为，在同一台计算机和屏幕上，不仅不同屏幕的位置不同，而且不同浏览器的位置也不同？有没有办法解决这个问题？让任何浏览器的位置相同？或者这是不可能的

由于我的代码大约有2600行，我认为如果我也附加它也不会有帮助，但以下是我发现相关的一些代码片段：


英雄手机信息

function checkNextRightPos(xx)
        {
            if((xx<=1246) && (xx>=1200))
                return 0;
            else if((xx<1200) && (xx>=1150))
                return 1;
            else if((xx<1150) && (xx>=1100))
                return 2;
            else if((xx<1100) && (xx>=1050))
                return 3;
            else if((xx<1050) && (xx>=1000))
                return 4;
            else if((xx<1000) && (xx>=950))
                return 5;
            else if((xx<950) && (xx>=900))
                return 6;
            else if((xx<900) && (xx>=850))
                return 7;
            else if((xx<850) && (xx>=800))
                return 8;
            else if((xx<800) && (xx>=750))
                return 9;
            else if((xx<750) && (xx>=700))
                return 10;
            else if((xx<700) && (xx>=650))
                return 11;
            else if((xx<650) && (xx>=600))
                return 12;
            else if((xx<600) && (xx>=550))
                return 13;
            else if((xx<550) && (xx>=500))
                return 14;
            else if((xx<500) && (xx>=450))
                return 15;
            else if((xx<450) && (xx>=400))
                return 16;
            else if((xx<400) && (xx>=350))
                return 17;
            else if((xx<350) && (xx>=295))
                return 18;
            else if((xx<295) && (xx>=245))
                return 19;
            else return -1;
        }

        function checkRightPos()
        {
            jj=checkNextRightPos(rightPos);
        }

        function checkNextTopPos(xx)
        {
            if((xx<=98) && (xx>=46))
                return 0;
            else if((xx<151) && (xx>=99))
                return 1;
            else if((xx<203) && (xx>=151))
                return 2;
            else if((xx<255) && (xx>=203))
                return 3;
            else if((xx<307) && (xx>=255))
                return 4;
            else if((xx<359) && (xx>=307))
                return 5;
            else if((xx<411) && (xx>=359))
                return 6;
            else if((xx<463) && (xx>=411))
                return 7;
            else if((xx<515) && (xx>=463))
                return 8;
            else if((xx<567) && (xx>=515))
                return 9;
            else if((xx<619) && (xx>=567))
                return 10;
            else if((xx<671) && (xx>=619))
                return 11;
            else if((xx<723) && (xx>=671))
                return 12;
        }   

        function checkTopPos()
        {
            ii=checkNextTopPos(topPos);
        }

功能检查nextrightpos（xx）
{
如果（（xx=1200））
返回0；
否则如果（（xx=1150））
返回1；
否则，如果（（xx=1100））
返回2；
否则，如果（（xx=1050））
返回3；
否则，如果（（xx=1000））
返回4；
否则如果（（xx=950））
返回5；
否则，如果（（xx=900））
返回6；
否则，如果（（xx=850））
返回7；
否则，如果（（xx=800））
返回8；
否则，如果（（xx=750））
返回9；
否则，如果（（xx=700））
返回10；
否则，如果（（xx=650））
返回11；
否则，如果（（xx=600））
返回12；
否则如果（（xx=550））
返回13；
否则，如果（（xx=500））
返回14；
否则，如果（（xx=450））
返回15；
否则，如果（（xx=400））
返回16；
否则，如果（（xx=350））
返回17；
否则如果（（xx=295））
返回18；
否则如果（（xx=245））
返回19；
否则返回-1；
}
函数checkRightPos（）
{
jj=检查下一个TrightPOS（右POS）；
}
功能检查nexttoppos（xx）
{
如果（（xx=46））
返回0；
否则如果（（xx=99））
返回1；
否则如果（（xx=151））
返回2；
否则如果（（xx=203））
返回3；
否则如果（（xx=255））
返回4；
否则如果（（xx=307））
返回5；
否则如果（（xx=359））
返回6；
否则如果（（xx=411））
返回7；
否则如果（（xx=463））
返回8；
否则如果（（xx=515））
返回9；
否则如果（（xx=567））
返回10；
否则如果（（xx=619））
返回11；
否则如果（（xx=671））
返回12；
}   
函数checkTopPos（）
{
ii=检查下一个目标（topPos）；
}

我指出了我所在的行和jj列


从矩阵生成地图

function makeMap()
        {
            var name="";
            for(var i=0; i<shurot; i++)
                for(var j=0; j<amudot; j++)
                {
                name="puzzle"+i+"x"+j; 
                        if(board[i][j]==0)
                        {
                            //alert(name);
                            document.getElementById(name).src="blank.bmp";
                        }
                        else if(board[i][j]==1)
                        {
                            //alert(name);
                            document.getElementById(name).src="ground.bmp";
                        }
                        else if(board[i][j]==2)
                            document.getElementById(name).src="tree_1.bmp";
                        else if(board[i][j]==3)
                            document.getElementById(name).src="tree_2.bmp";
                        else if(board[i][j]==4)
                            document.getElementById(name).src="tree_border.bmp";
                        else if(board[i][j]==5)
                            document.getElementById(name).src="forest_1.bmp";
                        else if(board[i][j]==6)
                            document.getElementById(name).src="forest_2.bmp";
                        else if(board[i][j]==7)
                            document.getElementById(name).src="forest_border.bmp";
                        else if(board[i][j]==8)
                            document.getElementById(name).src="cut_tree.bmp";
                        else if(board[i][j]==9)
                            document.getElementById(name).src="bush.bmp";
                        else if(board[i][j]==10)
                            document.getElementById(name).src="bush_border.bmp";
                }
       }

函数makeMap（）
{
var name=“”；
对于（var i=0；i，这是一个标题中提到的简单想法的大量代码和问题

据我所知，您正试图找到元素的位置，并根据客户端/浏览器显示它
<p style="line-height:0px">
<img src="blank.bmp" width=50 height=52 id="puzzle0x0"><img src="blank.bmp" width=50 height=52 id="puzzle0x1"><img src="blank.bmp" width=50 height=52 id="puzzle0x2"><img src="blank.bmp" width=50 height=52 id="puzzle0x3"><img src="blank.bmp" width=50 height=52 id="puzzle0x4"><img src="blank.bmp" width=50 height=52 id="puzzle0x5"><img src="blank.bmp" width=50 height=52 id="puzzle0x6"><img src="blank.bmp" width=50 height=52 id="puzzle0x7"><img src="blank.bmp" width=50 height=52 id="puzzle0x8"><img src="blank.bmp" width=50 height=52 id="puzzle0x9"><img src="blank.bmp" width=50 height=52 id="puzzle0x10"><img src="blank.bmp" width=50 height=52 id="puzzle0x11"><img src="blank.bmp" width=50 height=52 id="puzzle0x12"><img src="blank.bmp" width=50 height=52 id="puzzle0x13"><img src="blank.bmp" width=50 height=52 id="puzzle0x14"><img src="blank.bmp" width=50 height=52 id="puzzle0x15"><img src="blank.bmp" width=50 height=52 id="puzzle0x16"><img src="blank.bmp" width=50 height=52 id="puzzle0x17"><img src="blank.bmp" width=50 height=52 id="puzzle0x18"><img src="blank.bmp" width=50 height=52 id="puzzle0x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle1x0"><img src="blank.bmp" width=50 height=52 id="puzzle1x1"><img src="blank.bmp" width=50 height=52 id="puzzle1x2"><img src="blank.bmp" width=50 height=52 id="puzzle1x3"><img src="blank.bmp" width=50 height=52 id="puzzle1x4"><img src="blank.bmp" width=50 height=52 id="puzzle1x5"><img src="blank.bmp" width=50 height=52 id="puzzle1x6"><img src="blank.bmp" width=50 height=52 id="puzzle1x7"><img src="blank.bmp" width=50 height=52 id="puzzle1x8"><img src="blank.bmp" width=50 height=52 id="puzzle1x9"><img src="blank.bmp" width=50 height=52 id="puzzle1x10"><img src="blank.bmp" width=50 height=52 id="puzzle1x11"><img src="blank.bmp" width=50 height=52 id="puzzle1x12"><img src="blank.bmp" width=50 height=52 id="puzzle1x13"><img src="blank.bmp" width=50 height=52 id="puzzle1x14"><img src="blank.bmp" width=50 height=52 id="puzzle1x15"><img src="blank.bmp" width=50 height=52 id="puzzle1x16"><img src="blank.bmp" width=50 height=52 id="puzzle1x17"><img src="blank.bmp" width=50 height=52 id="puzzle1x18"><img src="blank.bmp" width=50 height=52 id="puzzle1x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle2x0"><img src="blank.bmp" width=50 height=52 id="puzzle2x1"><img src="blank.bmp" width=50 height=52 id="puzzle2x2"><img src="blank.bmp" width=50 height=52 id="puzzle2x3"><img src="blank.bmp" width=50 height=52 id="puzzle2x4"><img src="blank.bmp" width=50 height=52 id="puzzle2x5"><img src="blank.bmp" width=50 height=52 id="puzzle2x6"><img src="blank.bmp" width=50 height=52 id="puzzle2x7"><img src="blank.bmp" width=50 height=52 id="puzzle2x8"><img src="blank.bmp" width=50 height=52 id="puzzle2x9"><img src="blank.bmp" width=50 height=52 id="puzzle2x10"><img src="blank.bmp" width=50 height=52 id="puzzle2x11"><img src="blank.bmp" width=50 height=52 id="puzzle2x12"><img src="blank.bmp" width=50 height=52 id="puzzle2x13"><img src="blank.bmp" width=50 height=52 id="puzzle2x14"><img src="blank.bmp" width=50 height=52 id="puzzle2x15"><img src="blank.bmp" width=50 height=52 id="puzzle2x16"><img src="blank.bmp" width=50 height=52 id="puzzle2x17"><img src="blank.bmp" width=50 height=52 id="puzzle2x18"><img src="blank.bmp" width=50 height=52 id="puzzle2x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle3x0"><img src="blank.bmp" width=50 height=52 id="puzzle3x1"><img src="blank.bmp" width=50 height=52 id="puzzle3x2"><img src="blank.bmp" width=50 height=52 id="puzzle3x3"><img src="blank.bmp" width=50 height=52 id="puzzle3x4"><img src="blank.bmp" width=50 height=52 id="puzzle3x5"><img src="blank.bmp" width=50 height=52 id="puzzle3x6"><img src="blank.bmp" width=50 height=52 id="puzzle3x7"><img src="blank.bmp" width=50 height=52 id="puzzle3x8"><img src="blank.bmp" width=50 height=52 id="puzzle3x9"><img src="blank.bmp" width=50 height=52 id="puzzle3x10"><img src="blank.bmp" width=50 height=52 id="puzzle3x11"><img src="blank.bmp" width=50 height=52 id="puzzle3x12"><img src="blank.bmp" width=50 height=52 id="puzzle3x13"><img src="blank.bmp" width=50 height=52 id="puzzle3x14"><img src="blank.bmp" width=50 height=52 id="puzzle3x15"><img src="blank.bmp" width=50 height=52 id="puzzle3x16"><img src="blank.bmp" width=50 height=52 id="puzzle3x17"><img src="blank.bmp" width=50 height=52 id="puzzle3x18"><img src="blank.bmp" width=50 height=52 id="puzzle3x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle4x0"><img src="blank.bmp" width=50 height=52 id="puzzle4x1"><img src="blank.bmp" width=50 height=52 id="puzzle4x2"><img src="blank.bmp" width=50 height=52 id="puzzle4x3"><img src="blank.bmp" width=50 height=52 id="puzzle4x4"><img src="blank.bmp" width=50 height=52 id="puzzle4x5"><img src="blank.bmp" width=50 height=52 id="puzzle4x6"><img src="blank.bmp" width=50 height=52 id="puzzle4x7"><img src="blank.bmp" width=50 height=52 id="puzzle4x8"><img src="blank.bmp" width=50 height=52 id="puzzle4x9"><img src="blank.bmp" width=50 height=52 id="puzzle4x10"><img src="blank.bmp" width=50 height=52 id="puzzle4x11"><img src="blank.bmp" width=50 height=52 id="puzzle4x12"><img src="blank.bmp" width=50 height=52 id="puzzle4x13"><img src="blank.bmp" width=50 height=52 id="puzzle4x14"><img src="blank.bmp" width=50 height=52 id="puzzle4x15"><img src="blank.bmp" width=50 height=52 id="puzzle4x16"><img src="blank.bmp" width=50 height=52 id="puzzle4x17"><img src="blank.bmp" width=50 height=52 id="puzzle4x18"><img src="blank.bmp" width=50 height=52 id="puzzle4x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle5x0"><img src="blank.bmp" width=50 height=52 id="puzzle5x1"><img src="blank.bmp" width=50 height=52 id="puzzle5x2"><img src="blank.bmp" width=50 height=52 id="puzzle5x3"><img src="blank.bmp" width=50 height=52 id="puzzle5x4"><img src="blank.bmp" width=50 height=52 id="puzzle5x5"><img src="blank.bmp" width=50 height=52 id="puzzle5x6"><img src="blank.bmp" width=50 height=52 id="puzzle5x7"><img src="blank.bmp" width=50 height=52 id="puzzle5x8"><img src="blank.bmp" width=50 height=52 id="puzzle5x9"><img src="blank.bmp" width=50 height=52 id="puzzle5x10"><img src="blank.bmp" width=50 height=52 id="puzzle5x11"><img src="blank.bmp" width=50 height=52 id="puzzle5x12"><img src="blank.bmp" width=50 height=52 id="puzzle5x13"><img src="blank.bmp" width=50 height=52 id="puzzle5x14"><img src="blank.bmp" width=50 height=52 id="puzzle5x15"><img src="blank.bmp" width=50 height=52 id="puzzle5x16"><img src="blank.bmp" width=50 height=52 id="puzzle5x17"><img src="blank.bmp" width=50 height=52 id="puzzle5x18"><img src="blank.bmp" width=50 height=52 id="puzzle5x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle6x0"><img src="blank.bmp" width=50 height=52 id="puzzle6x1"><img src="blank.bmp" width=50 height=52 id="puzzle6x2"><img src="blank.bmp" width=50 height=52 id="puzzle6x3"><img src="blank.bmp" width=50 height=52 id="puzzle6x4"><img src="blank.bmp" width=50 height=52 id="puzzle6x5"><img src="blank.bmp" width=50 height=52 id="puzzle6x6"><img src="blank.bmp" width=50 height=52 id="puzzle6x7"><img src="blank.bmp" width=50 height=52 id="puzzle6x8"><img src="blank.bmp" width=50 height=52 id="puzzle6x9"><img src="blank.bmp" width=50 height=52 id="puzzle6x10"><img src="blank.bmp" width=50 height=52 id="puzzle6x11"><img src="blank.bmp" width=50 height=52 id="puzzle6x12"><img src="blank.bmp" width=50 height=52 id="puzzle6x13"><img src="blank.bmp" width=50 height=52 id="puzzle6x14"><img src="blank.bmp" width=50 height=52 id="puzzle6x15"><img src="blank.bmp" width=50 height=52 id="puzzle6x16"><img src="blank.bmp" width=50 height=52 id="puzzle6x17"><img src="blank.bmp" width=50 height=52 id="puzzle6x18"><img src="blank.bmp" width=50 height=52 id="puzzle6x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle7x0"><img src="blank.bmp" width=50 height=52 id="puzzle7x1"><img src="blank.bmp" width=50 height=52 id="puzzle7x2"><img src="blank.bmp" width=50 height=52 id="puzzle7x3"><img src="blank.bmp" width=50 height=52 id="puzzle7x4"><img src="blank.bmp" width=50 height=52 id="puzzle7x5"><img src="blank.bmp" width=50 height=52 id="puzzle7x6"><img src="blank.bmp" width=50 height=52 id="puzzle7x7"><img src="blank.bmp" width=50 height=52 id="puzzle7x8"><img src="blank.bmp" width=50 height=52 id="puzzle7x9"><img src="blank.bmp" width=50 height=52 id="puzzle7x10"><img src="blank.bmp" width=50 height=52 id="puzzle7x11"><img src="blank.bmp" width=50 height=52 id="puzzle7x12"><img src="blank.bmp" width=50 height=52 id="puzzle7x13"><img src="blank.bmp" width=50 height=52 id="puzzle7x14"><img src="blank.bmp" width=50 height=52 id="puzzle7x15"><img src="blank.bmp" width=50 height=52 id="puzzle7x16"><img src="blank.bmp" width=50 height=52 id="puzzle7x17"><img src="blank.bmp" width=50 height=52 id="puzzle7x18"><img src="blank.bmp" width=50 height=52 id="puzzle7x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle8x0"><img src="blank.bmp" width=50 height=52 id="puzzle8x1"><img src="blank.bmp" width=50 height=52 id="puzzle8x2"><img src="blank.bmp" width=50 height=52 id="puzzle8x3"><img src="blank.bmp" width=50 height=52 id="puzzle8x4"><img src="blank.bmp" width=50 height=52 id="puzzle8x5"><img src="blank.bmp" width=50 height=52 id="puzzle8x6"><img src="blank.bmp" width=50 height=52 id="puzzle8x7"><img src="blank.bmp" width=50 height=52 id="puzzle8x8"><img src="blank.bmp" width=50 height=52 id="puzzle8x9"><img src="blank.bmp" width=50 height=52 id="puzzle8x10"><img src="blank.bmp" width=50 height=52 id="puzzle8x11"><img src="blank.bmp" width=50 height=52 id="puzzle8x12"><img src="blank.bmp" width=50 height=52 id="puzzle8x13"><img src="blank.bmp" width=50 height=52 id="puzzle8x14"><img src="blank.bmp" width=50 height=52 id="puzzle8x15"><img src="blank.bmp" width=50 height=52 id="puzzle8x16"><img src="blank.bmp" width=50 height=52 id="puzzle8x17"><img src="blank.bmp" width=50 height=52 id="puzzle8x18"><img src="blank.bmp" width=50 height=52 id="puzzle8x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle9x0"><img src="blank.bmp" width=50 height=52 id="puzzle9x1"><img src="blank.bmp" width=50 height=52 id="puzzle9x2"><img src="blank.bmp" width=50 height=52 id="puzzle9x3"><img src="blank.bmp" width=50 height=52 id="puzzle9x4"><img src="blank.bmp" width=50 height=52 id="puzzle9x5"><img src="blank.bmp" width=50 height=52 id="puzzle9x6"><img src="blank.bmp" width=50 height=52 id="puzzle9x7"><img src="blank.bmp" width=50 height=52 id="puzzle9x8"><img src="blank.bmp" width=50 height=52 id="puzzle9x9"><img src="blank.bmp" width=50 height=52 id="puzzle9x10"><img src="blank.bmp" width=50 height=52 id="puzzle9x11"><img src="blank.bmp" width=50 height=52 id="puzzle9x12"><img src="blank.bmp" width=50 height=52 id="puzzle9x13"><img src="blank.bmp" width=50 height=52 id="puzzle9x14"><img src="blank.bmp" width=50 height=52 id="puzzle9x15"><img src="blank.bmp" width=50 height=52 id="puzzle9x16"><img src="blank.bmp" width=50 height=52 id="puzzle9x17"><img src="blank.bmp" width=50 height=52 id="puzzle9x18"><img src="blank.bmp" width=50 height=52 id="puzzle9x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle10x0"><img src="blank.bmp" width=50 height=52 id="puzzle10x1"><img src="blank.bmp" width=50 height=52 id="puzzle10x2"><img src="blank.bmp" width=50 height=52 id="puzzle10x3"><img src="blank.bmp" width=50 height=52 id="puzzle10x4"><img src="blank.bmp" width=50 height=52 id="puzzle10x5"><img src="blank.bmp" width=50 height=52 id="puzzle10x6"><img src="blank.bmp" width=50 height=52 id="puzzle10x7"><img src="blank.bmp" width=50 height=52 id="puzzle10x8"><img src="blank.bmp" width=50 height=52 id="puzzle10x9"><img src="blank.bmp" width=50 height=52 id="puzzle10x10"><img src="blank.bmp" width=50 height=52 id="puzzle10x11"><img src="blank.bmp" width=50 height=52 id="puzzle10x12"><img src="blank.bmp" width=50 height=52 id="puzzle10x13"><img src="blank.bmp" width=50 height=52 id="puzzle10x14"><img src="blank.bmp" width=50 height=52 id="puzzle10x15"><img src="blank.bmp" width=50 height=52 id="puzzle10x16"><img src="blank.bmp" width=50 height=52 id="puzzle10x17"><img src="blank.bmp" width=50 height=52 id="puzzle10x18"><img src="blank.bmp" width=50 height=52 id="puzzle10x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle11x0"><img src="blank.bmp" width=50 height=52 id="puzzle11x1"><img src="blank.bmp" width=50 height=52 id="puzzle11x2"><img src="blank.bmp" width=50 height=52 id="puzzle11x3"><img src="blank.bmp" width=50 height=52 id="puzzle11x4"><img src="blank.bmp" width=50 height=52 id="puzzle11x5"><img src="blank.bmp" width=50 height=52 id="puzzle11x6"><img src="blank.bmp" width=50 height=52 id="puzzle11x7"><img src="blank.bmp" width=50 height=52 id="puzzle11x8"><img src="blank.bmp" width=50 height=52 id="puzzle11x9"><img src="blank.bmp" width=50 height=52 id="puzzle11x10"><img src="blank.bmp" width=50 height=52 id="puzzle11x11"><img src="blank.bmp" width=50 height=52 id="puzzle11x12"><img src="blank.bmp" width=50 height=52 id="puzzle11x13"><img src="blank.bmp" width=50 height=52 id="puzzle11x14"><img src="blank.bmp" width=50 height=52 id="puzzle11x15"><img src="blank.bmp" width=50 height=52 id="puzzle11x16"><img src="blank.bmp" width=50 height=52 id="puzzle11x17"><img src="blank.bmp" width=50 height=52 id="puzzle11x18"><img src="blank.bmp" width=50 height=52 id="puzzle11x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle12x0"><img src="blank.bmp" width=50 height=52 id="puzzle12x1"><img src="blank.bmp" width=50 height=52 id="puzzle12x2"><img src="blank.bmp" width=50 height=52 id="puzzle12x3"><img src="blank.bmp" width=50 height=52 id="puzzle12x4"><img src="blank.bmp" width=50 height=52 id="puzzle12x5"><img src="blank.bmp" width=50 height=52 id="puzzle12x6"><img src="blank.bmp" width=50 height=52 id="puzzle12x7"><img src="blank.bmp" width=50 height=52 id="puzzle12x8"><img src="blank.bmp" width=50 height=52 id="puzzle12x9"><img src="blank.bmp" width=50 height=52 id="puzzle12x10"><img src="blank.bmp" width=50 height=52 id="puzzle12x11"><img src="blank.bmp" width=50 height=52 id="puzzle12x12"><img src="blank.bmp" width=50 height=52 id="puzzle12x13"><img src="blank.bmp" width=50 height=52 id="puzzle12x14"><img src="blank.bmp" width=50 height=52 id="puzzle12x15"><img src="blank.bmp" width=50 height=52 id="puzzle12x16"><img src="blank.bmp" width=50 height=52 id="puzzle12x17"><img src="blank.bmp" width=50 height=52 id="puzzle12x18"><img src="blank.bmp" width=50 height=52 id="puzzle12x19"><br>
</p> 

document.element.offsetLeft, document.element.offsetTop

document.element.clientWidth, document.element.clientHeight

var node = document.getElementById(someId);
var x = node.offsetLeft;
var y = node.offsetTop;
var width = node.offsetWidth;
var height = node.offsetHeight;

* {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 0;
}

<style type='text/css'>
  img.tile {
    position: absolute;
    width: 50px;
    height: 52px;
  }
</style>

<img class='tile' style='top: 1px; left: 51px;' />
<img class='tile' style='top: 1px; left: 101px;' />
<img class='tile' style='top: 1px; left: 151px;' />
<img class='tile' style='top: 51px; left: 1px;' />

<!-- etc. -->

<style type='text/css'>

  table.gameboard {
    width: 500px;
    height: 520px;
  }

  table.gameboard td {
    width: 50px;
    height: 52px;
    border-spacing: 0px;
    border-collapse: collapse;
  }

</style>

<table class='gameboard'>
  <tr>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <!-- etc. -->
  </tr>
  <tr>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <!-- etc. -->
  </tr>
  <!-- etc. -->
</table>

function Tile() {
  this.node = initalizeHoweverYouWant();

  this.contains = function(x, y) {
    if (
      x >= this.node.offsetLeft
      && x <= (this.node.offsetLeft + this.node.offsetWidth)
      && y >= this.node.offsetTop
      && y <= (this.node.offsetTop + this.node.offsetHeight)
    ) {
      return true;
    } else {
      return false;
    }
  }
}