[急]：求在图片上定位的方法和思路

主要目的是有一张图片，里面有许多小图，在图片上的小图点击，返回位值，然后计算出坐标。根据坐标从相关数据组查找，返回图片名。可以理解为九宫格。点击其中的一个格子！每一个格式和一个图片联系。点击其中一个格子，然后到数组中图片名？有没有什么好的方法功思路。最基本的，如何在图片上点击，取得这个相对于这个图片的坐标（图片可放网页中任意位置）？

解决方案 »

  1.   

    给出计算相对坐标的计算思路，至于如何根据坐标判断就是 lz 自己的事儿了L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="generator" content="editplus" />
        <meta name="author" content="[email protected]" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
    </head><body>
        <table border=1>
            <tr>
                <td>111111111</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>
                    <div id="containerDiv" style="border: 0px solid red; width: 200px; height: 200px; background-color: yellow;">                </div>
                </td>
            </tr>
        </table>
        <script type="text/javascript">
        <!--
    document.GetAbsoluteOffsetTop = function(oNode) {
        /// <summary>
        /// 获取给定节点的上边缘距离窗体上边缘的绝对偏移量，返回一个整型值。
        /// </summary>
        /// <param name="oNode">必选项。给定节点。</param>        var absOffsetTop = oNode.offsetTop;        while (oNode.offsetParent) {
                oNode = oNode.offsetParent;
                absOffsetTop += oNode.offsetTop;
                if (oNode.scrollTop) {
                    absOffsetTop -= oNode.scrollTop;
                }
            }        return absOffsetTop;
    };document.GetAbsoluteOffsetLeft = function(oNode) {
        /// <summary>
        /// 获取给定节点的左边缘距离窗体左边缘的绝对偏移量，返回一个整型值。
        /// </summary>
        /// <param name="oNode">必选项。给定节点。</param>        var absOffsetLeft = oNode.offsetLeft;        while (oNode.offsetParent) {
                oNode = oNode.offsetParent;
                absOffsetLeft += oNode.offsetLeft;
                if (oNode.scrollLeft) {
                    absOffsetLeft -= oNode.scrollLeft;
                }
            }        return absOffsetLeft;
    };var container = document.getElementById("containerDiv");
    container.AbsoluteOffsetTop = document.GetAbsoluteOffsetTop(container);
    container.AbsoluteOffsetLeft = document.GetAbsoluteOffsetLeft(container);container.onclick = function() {
        var offsetTop = event.clientY - container.AbsoluteOffsetTop;
        var offsetLeft = event.clientX - container.AbsoluteOffsetLeft;
        // 越靠近左上角，越趋近 (0, 0)
        // 越靠近右下角，越趋近 (200, 200)
        alert(offsetTop + " : " + offsetLeft);
    };
        //-->
        </script>
    </body>
    </html>
      

  2.   

    看看这个。<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312" />
    <style type="text/css">
    *{font-family:verdana,arial; font-size:12px; font-weight:normal;}
    </style>
    <script type="text/javascript">
    function getXYaxis(refObj){
    alert('object '+refObj.tanName+" offset ( x, y ) = ("+refObj.offsetLeft+' , '+refObj.offsetTop+')');
    }
    </script>
    </head><body>
    <br>
    点击图片看看
    <br>
    <br>
    <br>
    <img src="product01.jpg" width="500" height="224" onClick="javascript:getXYaxis(this);">
    </body>
    </html>
      

  3.   

    上面是单个对象，修改一下，当存在多个对象时，（不考虑滚动条的的情况）<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312" />
    <style type="text/css">
    *{font-family:verdana,arial; font-size:12px; font-weight:normal;}
    </style>
    <script type="text/javascript">
    function getXYaxis(refObj){
    var l=0,t=0;
    var o=refObj;
    while (o.offsetParent) {
    t += o.offsetTop;
    l += o.offsetLeft;    
    o = o.offsetParent;
    }

    alert('object '+o.tagName+" offset ( x, y ) = ("+l+' , '+t+')');
    }
    </script>
    </head><body>
    <br>
    点击图片看看
    <br>
    <br>
    <br>
    <img src="product01.jpg" width="500" height="224" onClick="javascript:getXYaxis(this);">
    </body>
    </html>
      

  4.   

    图片的位置可以确定为imgX,imgY(阅览器坐标系）
    图片的长宽可以确定为imgW,imgH(阅览器坐标系）
    点击的位置可以确定为clkX,clkY(阅览器坐标系）于是可以求出图片的点击的相对坐标
    (clkX-imgX)/imgW , (clkY-imgY)/imgH假设有３ｘ３个图片，图片可以用这个方法储存
    imgs="1.jpg,2.jpg,3.jpg....8.jpg".split(",");确认点击的是那个图片，可以这样算
    X=floor((clkX-imgX)/imgW * 3);
    Y=floor((clkY-imgY)/imgH * 3);
    img=imgs(X*3 + Y);
      

  5.   

    shenzhenNBA 你好！
    2楼的和3楼的代码取不到正确值，很奇怪！
    点击只出现固定值，而且IE和FF下还不一样？Doctype的问题？
      

  6.   


    位置这个是比较烦点，注意几个问题：
    1，对不同的Doctype可能得到的值不同；2，位置的值，有个参考对象的的问题，这个比较罗嗦烦杂，也就是值是相对于参考物（对象）得到的值，这个参考物就是直接上一个父对象，当父对象还有父对象，...所以left或top的值，单一一个时是直接相对于直接一个父对象的值，当循环取到所有父对象的left或top值累加即可得到距离IE边框的值；3，各个IE的坐标定义可能有别，所以各个IE的值估计有点差别,看你具体的情况处理了嘿嘿 LZ 可以结帖了吗？
      

  7.   

    1楼代码可用：
    下面的代码可用： function getXYaxis(){
    var x,y;
    var e= GetEvent();
    if(window.event){
    x= e.offsetX;
    y= e.offsetY;
    }else{
    x= e.layerX;
    y= e.layerY;
    }
    alert( x+ ','+y);
    }