有点像许愿墙的功能,有一个全局的层的zIndex的currzIndex变量,
当mousedown时
this.style.zIndex = currZIndex++;

解决方案 »

  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" xml:lang="zh-CN" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body><div id=picdiv style="width:300px;height:300px;border:1px red solid;font-size:0px;float:left">
    <img id=pic_a src="1.jpg" style="width:300px;height:300px;">
    </div>
    <div id=picS style="display:none;width:100px;height:100px;border:1px blue solid;font-size:0px;">
    <img id=pic_b src="2.jpg" bigsrc="3.jpg" style="width:100px;height:100px;" onclick=uphoto(this) alt="请点击2次">
    </div>
    <br style="clear:both">
    <input type=button onclick=showphoto() value=upphoto>
    <script language="javascript">
    <!--
    function getPosition(theElement){
    var positionX =0;
    var positionY =0;
    while (theElement !=null){
    positionX +=theElement.offsetLeft;
    positionY +=theElement.offsetTop;
    theElement =theElement.offsetParent;
    }
    return [positionX,positionY];
    }function showphoto(){
    document.getElementById("picS").style.display=""
    }var ws=100;//for pic_b
    var hs=100;//for pic_b
    var wb=300;//for pic_c
    var hb=300;//for pic_c
    var click=1//点击次数
    function uphoto(_this){
    var w=ws
    var h=hs
    var url=_this.src//for pic_b
    if (click>1){
    w=wb
    h=hb
    url=_this.bigsrc;//for pic_c
    }
    click++
    var p=getPosition(document.getElementById("picdiv"))
    var newDiv=document.createElement("div")
    with(newDiv.style){
    position="absolute"
    width=w+"px"
    height=h+"px"
    top=p[1]
    left=p[0]
    //zIndex=click*10
    }
    newDiv.id="upphotodiv"+click
    newDiv.innerHTML='<img name=mypi_b_c src="'+url+'" style="width:'+w+'px;height:'+h+'px;">'
    document.body.appendChild(newDiv)
    }
    //-->
    </script>
    </body>
    </html>
      

  2.   

    太感谢了!!!
     2 楼真是大好人啊!!!
    不过,还有一个小问题:
    theElement.offsetLeft;
    theElement.offsetTop;
    theElement.offsetParent;
    我知道这几条语句是取位置用的属性,但是不太清楚具体什么意思?
    还麻烦你解答一下啊!
    还有就是这段代码在Firefox中工作不正常,原因在哪啊?
      

  3.   

    theElement.offsetLeft; //theElement的实际left
    theElement.offsetTop; //theElement的实际top
    theElement.offsetParent; //简单说:指存在的具有定位属性的父级
    (详情请GG)还有就是这段代码在Firefox中工作不正常 
    --请尝试调整 appendChild(newDiv)的方式
    (抱歉:本机目前未安装FF,无法测试)
      

  4.   

    <!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" xml:lang="zh-CN" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body><div id=picdiv style="width:300px;height:300px;border:1px red solid;font-size:0px;float:left">
    <img id=pic_a src="1.jpg" style="width:300px;height:300px;">
    </div>
    <div id=picS style="display:none;width:100px;height:100px;border:1px blue solid;font-size:0px;">
    <img id=pic_b src="2.jpg" bigsrc="3.jpg" style="width:100px;height:100px;" onclick=uphoto(this) alt="请点击2次">
    </div>
    <br style="clear:both">
    <input type=button onclick=showphoto() value=upphoto>
    <script language="javascript">
    <!--
    function getPosition(theElement){
        var positionX =0;
        var positionY =0;
        while (theElement !=null){
            positionX +=theElement.offsetLeft;
            positionY +=theElement.offsetTop;
            theElement =theElement.offsetParent;
        }
        return [positionX,positionY];
    }function showphoto(){
    document.getElementById("picS").style.display=""
    }var ws=100;//for pic_b
    var hs=100;//for pic_b
    var wb=300;//for pic_c
    var hb=300;//for pic_c
    var click=1//点击次数
    function uphoto(_this){
        var w=ws
        var h=hs
        var url=_this.src//for pic_b
        if (click>1){
            w=wb
            h=hb
            url=_this.bigsrc;//for pic_c
        }
        click++
        var p=getPosition(document.getElementById("picdiv"))
        var newDiv=document.createElement("div")
        with(newDiv.style){
            position="absolute"
            width=w+"px"
            height=h+"px"
            top=p[1]
            left=p[0]
            //zIndex=click*10
        }
        newDiv.id="upphotodiv"+click
        newDiv.innerHTML='<img name=mypi_b_c src="'+url+'" style="width:'+w+'px;height:'+h+'px;">'
        document.body.appendChild(newDiv)
    }
    //-->
    </script>
    </body>
    </html>
      

  5.   

    谢谢了!!!
    再麻烦一下,
    如果我的图片a是一个可以获得热区的图片呢?
    简单来说,就是在一个图片a热区上单击,
    弹出一个带有一张图片b的窗体,单击图片b
    图片b就会添加到图片a的相应的热区位置。
    我现在的疑惑是怎样确定这个热区位置呢?
    也就是怎样确定图片b或者包含图片b的div
    的left和top属性呢???要不我怎么知道要把
    图片b放在哪呢?
      

  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" xml:lang="zh-CN" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>热区加图片层</title>
    </head>
    <body>
    <div id=picdiv style="width:300px;height:300px;border:0px red solid;font-size:0px;float:left">
    <map name="FPMap0">
    <area href="###" shape="rect" coords="0, 0, 100, 100" onclick="showphoto(this.coords,'images/2.jpg')" alt='2.jpg' >
    <area href="###" shape="rect" coords="200, 200, 300, 300" onclick="showphoto(this.coords,'images/3.jpg')" alt='3.jpg'>
    </map>
    <img id=pic_a src="images/1.jpg" style="width:300px;height:300px;" usemap="#FPMap0" border=0>
    </div>
    <div id=picS style="display:none;width:100px;height:100px;border:0px blue solid;font-size:0px;">
    <img id=pic_b src=""coords="" style="width:100px;height:100px;" onclick=uphoto(this) border=0>
    </div><br style="clear:both"><script language="javascript">
    <!--
    function getPosition(theElement){
        var positionX =0;
        var positionY =0;
        while (theElement !=null){
            positionX +=theElement.offsetLeft;
            positionY +=theElement.offsetTop;
            theElement =theElement.offsetParent;
        }
        return [positionX,positionY];
    }function showphoto(_coords,url){
    with(document.getElementById("pic_b")){
    coords=_coords
    src=url
    }
    document.getElementById("picS").style.display=""
    }function hidphoto(){
    with(document.getElementById("pic_b")){
    coords=""
    src=""
    }
    document.getElementById("picS").style.display="none"
    }var w=100;//for pic_b
    var h=100;//for pic_b
    function uphoto(_this){
        var p=getPosition(document.getElementById("picdiv"))
        var t=_this.coords.split(",")
       var newDiv=document.createElement("div")
        with(newDiv.style){
            position="absolute"
            width=w+"px"
            height=h+"px"
            top=p[1]+parseInt(t[1])+"px"
            left=p[0]+parseInt(t[0])+"px"
        }
        newDiv.innerHTML='<img name=mypi_b_c src="'+_this.src+'" style="width:'+w+'px;height:'+h+'px;" border=0>'
        document.body.appendChild(newDiv)
    hidphoto()
    }
    //-->
    </script></body>
    </html>