「自分のTシャツを作る」製品表示ページのためにPNG画像を重ねるにはどうすればいいですか？javascript/css/asp

Question

クラシックASPでCMSを構築しました。 ショッピングカートと支払いシステムがあります。 私はタイトル、価格、サムネイル画像などの他に、どの製品でも持っている機能を追加しています。「画像を積み重ねる」。

たとえば、あなたがTシャツを販売している場合、そのページの1つの「製品」はそれに関連する独自のPNGを持つ「シャツスタイル」になります。同じページの次の「製品」は「シャツの色」です。その後、 "ロゴ"または "テキスト"。これらの各アイテムは、ページの左側にある1つのイメージに影響を与え、これらのPNGは最終製品の外観を作成するために「スタック」します。

私が弱いのは、javascriptとcssです。誰かが私を助けるためにいくつかのコードや手がかりを持っていますか？

ああ、何百もの画像がありますので、ページが読み込まれたときにすべての画像を読み込むのではなく、その場で読み込ませる方法についてのヒントもあります。

ありがとう、仲間のプログラマー！

Answer 1

CSSプロパティーposition:absoluteを使用すると、要素を上に置くことができ、z-indexは積み重ね順序を制御するため、すべての設定を正しく行うために使用します。

次に、既存の要素のいずれかのsrcを必要なものに変更するために、javascriptを使用してロードします。

<div id="shirt> 
    <img id="color" src="blank.png"> 
    <img id="decal" src="blank.png"> 
    <img id="logo" src="blank.png"> 
</div> 

（jQueryの使用） -

$('#color').attr('src','red-shirt.png'); 
$('#decal').attr('src','lion-decal.png'); 
$('#logo').attr('src','bold-logo.png'); 

Answer 2

することは残念ながら、あなたの質問は、あなたが思っているよりもっと広いです。

あなたはおそらく、Ajaxを巧妙なCSSに加えて探しているでしょう。 jQueryを調べることをお勧めします。 W3Schoolsは非常に良いチュートリアルを持っています。基礎を理解したら、基本的なAJAXをセットアップしてイメージファイルをロードし、イメージファイルを重ね合わせることができます。 JQueryはAJAXを使用する非常に簡単な方法を持っていますので、jQueryが実際にどのように動作するかを理解したら、問題はありません。

そこから、CSSを使用してそれぞれの画像ファイルを配置できます。私は基本としてそれぞれ<img>を設定し、それらのすべてを<div>の内側に置きます。そこからposition: absolute;を見て、残りの部分を見つけてください。より具体的な質問がある場合は、お気軽にお問い合わせください。

Answer 3

z-indexを使用して、どちらの画像が上部にあるかを確認します。 position:absolute画像が重複するように1つの画像に指定してください。

しかし、ここでは多くのアプローチがあります。 これを試してみてください：http://jsfiddle.net/N6rjG/

ここでは、Tシャツをdivの背景にして、選択した画像をその中に入れます。スクリプトは既にそこにあり、簡単です。

HTML：

<!-- This one will be the tshirt---> 
<div id="tshirt"> 
</div> 

<h1>Click on Image to Select Design</h1> 
<!--the choices--> 
<img id="d1" class="d" src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQUomLjtjuA81HKgj48ZaIT6Uvd9JGttmUvVcFO3j3ytp6v6MV0" /> 

<img id="d2" class="d" src="http://www.ironman2.net/iron-man.jpg" /> 

<img class="d" src="http://www.unc.edu/~bhamidi/personal/naruto.jpg" />​ 

CSS：

#tshirt{ 
    float:left; 
    width:390px; 
    height:400px; 
    background:url(http://www.schumacher-fanclub.com/media/SFR1119-ferrari-t-shirt-small-scudetto-red.jpg); 
} 

.d{ 
    width:100px; 
    height:130px; 
    cursor:pointer; 
} 

スクリプト：

$('img').click(function(){ 
    $("#tshirt").html(' '); 
    $(this).clone() 
     .appendTo("#tshirt") 
     .css({margin:'130px 0 0 150px'}); 
});​