Question

我正在构建产品配置器。我需要2个图像重叠。想象一下炉子，炉子本身是一个图像，旋钮/处理另一个。

两个图像的大小相同，因此它们应该“完全”重叠。两个图像都在div内，并且基于一个返回div.append（Child）的函数，如果重要的话。

我已经尝试过我在网上找到的各种方式，做我认为正确但但显然不起作用。如果我调用1 div然后调用另一个（img1img2），它们就不会重叠。如果我在第一个div中调用第二个图像，它就不会显示。我究竟做错了什么？！ HTML：

    <input type="button" onclick="create_img(); " value="Create image" />
    <div class="imageWrapper">
    <div id="pop" >
    <div id="pop2" >
    </div>
    </div>
    </div>

JS：

    function create_img(){


var im=""
var div = document.getElementById("pop");
var hold= document.createElement("img");

if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="12" ){im= "http://www.french-barn.com/configurator/img_front/cormatin/jauneprovence.jpg" ;}
else if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="13" ){im= "http://www.french-barn.com/attachments/Image/Lacanche/Ranges_front/Chagny1800-trans.png" ;}
else {im="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}

hold.src=im;
hold.border=0;
div.appendChild(hold);

var im2=""
var div = document.getElementById("pop2");
var hold= document.createElement("img");

if (document.Lacanche_Configurator.Finishes.value=="1" ){im2= "http://www.french-barn.com/configurator/img_front/cormatin/laitonbrillant.png" ;}
else {im2="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}

hold.src=im2;
hold.border=0;
div.appendChild(hold);
}

CSS：

    .imageWrapper{
            position: relative;
            top:0;
            left:0;
            width:160px;
            }


            #pop {
            background:transparent;
            }


            #pop2 {
            position: absolute;
            left:0;
            top: -150px;
            background:transparent;

            }

我尝试了很多方法，不知道下一步该做什么!!

谢谢！

Answer 1

如果您只需要堆叠2张图片，那么您应该可以使用单个<IMG/>标记执行此操作。将<IMG/>标记的CSS背景图像设置为炉子的图片。然后将src标记的<IMG/>属性设置为旋钮。

Answer 2

所以，按照David的建议并对正确的语法进行更多研究，这就是我想出的。该函数根据列出的参数创建两个图像（im amd im2），然后一个定义为bg图像，另一个定义为src图像。所以看起来我真的不需要css来解决这个问题。

再次感谢，大卫！通过让别人为我设计这个来节省了我很多时间，头痛和金钱！

function create_img(){


                var im=""
                var div = document.getElementById("pop");
                var hold= document.createElement("img");

                if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="12" ){im= "http://www.french-barn.com/configurator/img_front/cormatin/jauneprovence.jpg" ;}
                else if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="13" ){im= "http://www.french-barn.com/attachments/Image/Lacanche/Ranges_front/Chagny1800-trans.png" ;}
                else {im="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}

                var im2=""
                var div = document.getElementById("pop");
                var hold= document.createElement("img");

                if (document.Lacanche_Configurator.Finishes.value=="1" ){im2= "http://www.french-barn.com/configurator/img_front/cormatin/laitonbrillant.png" ;}
                else if (document.Lacanche_Configurator.Finishes.value=="2" ){im2= "http://www.french-barn.com/configurator/img_front/cormatin/nickel.png" ;}
                else {im2="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}

                hold.src=im2;
                hold.border=0;
                div.appendChild(hold);
                div.style.backgroundImage = 'url("'+im+'")';


                }

重叠div（是的，再次！）

2 个答案: