一张大图上任意贴几张小图

先有一个大图A，有一个小图B。
现在要在A上任意用鼠标点击，点击的地方就会出现B。就相当于在一个人的图上面贴红花一样的。
我现在的思路是点击A以后新建一个层，这个层包含B。是不是这样？
求源码。谢谢谢谢

解决方案 »

  1.   

    思路正确<!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></title>
        <style>
            #panel
            {
                position: absolute;
                width: 400px;
                height: 400px;
                background-image: url("");
                background-color: Gray;
                left: 200px;
                top: 100px;
            }
        </style>    <script language="javascript">
            function AddImage(event)
            {
                var x, y;
                if (window.event)
                {
                    x=event.offsetX;
                    y= event.offsetY;
                }
                else
                {
                    x = event.layerX;
                    y = event.layerY;
                }
                var img = document.createElement("img");
                img.style.position = "absolute";
                img.style.left = x+"px";
                img.style.top = y+"px";
                img.src = "/content/images/messager_error.gif";            document.getElementById("panel").appendChild(img);
            }
        </script></head>
    <body>
        <div id="panel" onclick="AddImage(event);">
        </div>
    </body>
    </html>
      

  2.   

    点击A
    记录A的坐标
    新建div，定位为  记录点击时A的坐标div内填充图片B
      

  3.   

    3楼的好像有个BUG 就是你点击一次出来一个图片 然后点击这个图片 再出来的图片坐标就不对了
      

  4.   

    定义 z-index 轴就可以了记录点击次数 cout 每点击一次，新建的img的z-index设为 cout
      

  5.   

    这个确实有，设置Z轴是不管用的，看看event对象的offset***属性就明白了
      

  6.   


    <!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></title>
        <style>
            #panel
            {
                position: absolute;
                width: 400px;
                height: 400px;
                background-image: url("");
                background-color: Gray;
                left: 200px;
                top: 100px;
            }
        </style>    <script language="javascript">
            function AddImage(event)
            {
                var panel = document.getElementById("panel");
                var x, y;            x = event.clientX - panel.offsetLeft-16;//减去图片宽度（32）的一半
                y = event.clientY - panel.offsetTop-16; 
              
                var img = document.createElement("img");
                img.style.position = "absolute";
                
                img.style.left = x+"px";
                img.style.top = y+"px";
                img.src = "/content/images/messager_error.gif";            panel.appendChild(img);
            }
        </script></head>
    <body>
        <div id="panel" onclick="AddImage(event);">
        </div>
    </body>
    </html>