高手请来帮忙。

图片上加上点，鼠标点击图片，图片上能够显示点，可以显示很多的点，最后这些点的总数可以被统计出来

解决方案 »

  1.   

    客户断要模拟图片加点可以用DIV来模拟，在图片区域appendChild可以实现，最后统计出所有DIV，就是点数了，最后是我的思路:-)
      

  2.   


    <html>
        <head>
            <script type="text/javascript">
                function $(id)
                {
                    return document.getElementById(id);
                }
                var TotalCount=10;
                var pointCount=0;
                function showPoint(event)
                {
                    if(pointCount<TotalCount)
                    {
                        pointCount++;
                        var point=document.createElement("div");
                        
                        point.style.backgroundColor="#000000";
                        point.style.position="absolute";
                        point.style.width="4px";
                        point.style.height="4px";
                        point.style.fontSize="0";
                        point.style.top=event.y?event.y:event.pageY;
                        point.style.left=event.x?event.x:event.pageX;
                        point.style.zIndex=100;
                        document.body.appendChild(point);
                        
                        var pointX=parseInt(event.x?event.x:event.pageX)-parseInt($("img1").style.left);
                        var pointY=parseInt(event.y?event.y:event.pageY)-parseInt($("img1").style.top);
                        $("sp1").innerHTML+="Point "+pointCount+" : "+"("+pointX+","+pointY+")<br/>";
                    }
    else
    {
    alert("Total points:"+pointCount);
    }
                }
            </script>
        </head>
        <body>
            <img id="img1" style="z-index:10;position:absolute;left:200px;top:100px;" onclick="showPoint(event)" src="a.jpg"/><br/>
            <span id="sp1"></span>
        </body>
    </html>像这样显示可以吗？
      

  3.   


    <html>
        <head>
            <script type="text/javascript">
                function $(id)
                {
                    return document.getElementById(id);
                }
                var pointCount=0;
                function showPoint(event)
                {
                        pointCount++;
                        var point=document.createElement("div");
                        
                        point.style.backgroundColor="#000000";
                        point.style.position="absolute";
                        point.style.width="4px";
                        point.style.height="4px";
                        point.style.fontSize="0";
                        point.style.top=event.y?event.y:event.pageY;
                        point.style.left=event.x?event.x:event.pageX;
                        point.style.zIndex=100;
                        document.body.appendChild(point);
                        
                        var pointX=parseInt(event.x?event.x:event.pageX)-parseInt($("img1").style.left);
                        var pointY=parseInt(event.y?event.y:event.pageY)-parseInt($("img1").style.top);
                        $("sp1").innerHTML+="Point "+pointCount+" : "+"("+pointX+","+pointY+")<br/>";
                }
        function showPointsCount()
        {
    alert("Total points:"+pointCount);
        }
            </script>
        </head>
        <body>
            <img id="img1" style="z-index:10;position:absolute;left:200px;top:100px;" onclick="showPoint(event)" src="a.jpg"/><br/>
    <input type="button" value="Show points count" onclick="showPointsCount()"><br/>
            <span id="sp1"></span>

        </body>
    </html>还是要像这样？
      

  4.   

    good good study ,day day up,