0

我正在构建一个产品配置器。我需要 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;

            }

我已经尝试了很多方法，不知道下一步该怎么做！！

谢谢！

4

2 回答 2

0

所以，按照大卫的建议，对正确的语法做更多的研究，这就是我想出的。该函数根据列出的参数创建两个图像（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+'")';


                }
于 2013-10-16T23:29:18.980 回答
0

如果您只需要堆叠 2 个图像，那么您应该能够使用单个<IMG/>标签来执行此操作。将<IMG/>标签的 CSS background-image 设置为炉子的图片。然后将标签的src属性设置<IMG/>为旋钮。

于 2013-10-16T21:43:19.423 回答