0

製品コンフィギュレーターを構築しています。重ねるには2枚の画像が必要です。ストーブ自体が 1 つのイメージであり、ノブ/ハンドルが別のイメージであるストーブを想像してみてください。

両方の画像は同じサイズなので、「完全に」重なる必要があります。どちらの画像も div 内にあり、必要に応じて div.append(Child) を返す関数に基づいています。

オンラインで見つけたすべての方法を試しましたが、正しいと思うことを実行しましたが、明らかにうまくいきません. 1 つの div を呼び出してからもう 1 つ (img1img2) を呼び出すと、重複しません。最初の div 内で 2 番目の画像を呼び出すと、表示されません。私は何を間違っていますか?! 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

それで、David のアドバイスに従い、適切な構文についてさらに調査を行った結果、これが私が思いついたものです。この関数は、リストされているパラメーターに従って両方の画像 (im と im2) を作成し、1 つは bg 画像として定義され、もう 1 つは 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

<IMG/>2 つの画像をスタックする必要がある場合は、1 つのタグを使用してこれを実行できるはずです。タグの CSS background-image を<IMG/>ストーブの画像に設定します。次に、タグのsrc属性をノブに設定します。<IMG/>

于 2013-10-16T21:43:19.423 に答える