关于在网页中如何将导航菜单打开的两个图片进行叠加

<li><a href="/plus/list.php?tid=1" onmouseover="mopen('m1')" onmouseout="mclosetime()">关于我们</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="01.jpg" width="200" height="100" target="centerFrame" >第一选项</a>
 <a href="02.jpg" width="200" height="100" target="centerFrame">第二选项</a>
 <a href="3.jpg" width="200" height="100" target="displayFrame" >第三选项</a>
<a href="4.jpg" width="200" height="100" target="displayFrame" >第四选项</a>
<a href="5.jpg" width="200" height="100" target="displayFrame" >第五选项</a>
</div>
</li>
上面这个是它原本的导航菜单的其中一部分，是先点击"关于我们"后出来第一到第五五个选项，然后最好的是五个选项各自点击后链接到的图片能进行叠加，组合成一个新图，当然最少也是点击其中的两项能够叠加，本人试过无数次方法都没成功，求大神指点一二，谢过了

解决方案 »

  1.   

    我已经用frameset分层了，导航菜单在左边，要显示的效果图在右边，也就是displayFrame部分，就是左边现在一栏有五个部分，分成第一到第五选项，当鼠标点击第一到第五选项时相应出来的图片不会发生替换，而是叠加，举个例子来说，就是下面的图片是“从”字，上面的图片是“人”字，当它们两个叠加起来后就组合成“众”字，当然你不需要考虑透不透明的问题，因为它们各个图片是各个部件分散的，现在要的效果就是像做衣服似的，第一个图片显示袖子，第二个片显示领子，第三个图片显示主体，它们三个叠加后将显示出一个完整的衣服，就是要这种效果，但目前效果图我还没有
      

  2.   

    组装是在页面中多个图片拼接（上次已经跟你说了：用css绝对定位）
    还是将图片组装成一个大图片（可用GD实现）
      

  3.   

    也许可能是我没有写对，css绝对定位试过行不通，用GD也试过，也不行，这两种方法我如果专门指定两个图片来的话是可以的，但是现在是经过二级菜单点击后产生的两个或多个图片，貌似没有用，还请你能给出具体的代码，谢谢
      

  4.   

    按你说的应该是多个图片的拼接，当点击第一到第五选项时出来的图片不进行替换，而是在右边同一页面拼接成一个完整的图片，我试了好多方法都行不通，希望你可以帮忙给下代码实现方法，谢谢，
    <script type="text/javascript">
    var z = 0;
    function set(o){
        document.getElementById("show").innerHTML += '<img style="position:absolute;z-index:' + z + '" src="' + o.getAttribute('pic') + '">';
        z++;
    }
    </script>
    <div id="show">
     <a href="javascript:void(o)" pic="1.jpg" width="300" height="200" onclick="set(this)">第一选项</a>
    <a href="javascript:void(o)" pic="2.jpg" width="200" height="200" onclick="set(this)">第二选项</a>
    </div>
    再帮我看看这个代码哪有问题，怎么实现不了，多谢了
      

  5.   

    <html>
    <head>
    <style>
    .div1{
    background-color: black;
    width:200px;
    height:400px;
    }
    .div2{
    background-color: pink;
    width:100px;
    height:100px;
    top:80px;
    left:55px;
    position: absolute;

    }
    .div3{
    background-color: blue;
    width:100px;
    height:100px;
    top:220px;
    left:55px;
    position: absolute;
    }
    </style>
    </head><body>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div1"></div>
    </body>
    </html>看下解决你问题了米有
      

  6.   

    你这个方法我有，问题是我现在把导航菜单放在了frame里显示的，加进去就不行了，我在想是不是frame不能这样实现效果，
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>图片测试</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <frameset cols="240,*">
    <frame src="temp1.html" name="navigationFrame" scrolling="Yes" noresize="noresize"  title="导航" />
    <frame src="" name="displayFrame" id="displayFrame" title="显示" marginwidth="0" marginheight="0"/>
    </frameset>
    <noframes>
    <body></body>
    </noframes>
    </html>
    我现在的导航菜单就是temp1.html，加里面就不行了，不知道还有没有别的方法