2

私はClassicASPを使用してCMSを構築しました（ええ、私はそれが古いことを知っています）。ショッピングカートと支払いシステムがあります。タイトル、価格、サムネイル画像などに加えて、あらゆる商品に「積み重ね用の画像」を追加する機能を追加しています。

したがって、たとえば、Tシャツを販売している場合、ページ上の1つの「製品」は、独自のPNGが関連付けられた「シャツスタイル」になります。同じページの次の「商品」は「シャツの色」になります。次に、「ロゴ」または「テキスト」。これらの各アイテムは、ページの左側にある1つの画像に影響を与えるため、これらのPNGは「スタック」して、最終製品がどのように見えるかを作成します。

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

ああ、何百もの画像があるので、ページの読み込み時にすべての画像を読み込もうとするのではなく、その場で画像を読み込む方法のヒントも教えてください。

プログラマーの皆さん、ありがとう！

4

3 に答える 3

3

CSSプロパティをposition:absolute使用すると、要素を相互に重ねて配置z-indexし、積み重ね順序を制御できるため、それらを使用してすべてを正しく設定します。

次に、その場でロードするには、javascriptを使用してsrc、既存の要素のいずれかを必要なものに変更します（このように）。（jQueryを使用）

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

-

$('#color').attr('src','red-shirt.png');
$('#decal').attr('src','lion-decal.png');
$('#logo').attr('src','bold-logo.png');
于 2012-05-09T16:17:36.697 に答える
2

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'});
});​
于 2012-05-09T16:44:49.210 に答える
1

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

あなたはおそらくいくつかの賢いCSSに加えてAJAXを探しています。jQueryを調べることをお勧めします。W3Schoolsには非常に優れたチュートリアルがあります。基本を理解したら、基本的なAJAXを設定して画像ファイルをロードし、それらを積み重ねることができます。JQueryはAJAXを操作する非常に簡単な方法を持っているので、jQueryが実際にどのように機能するかを理解すれば、問題はありません。

そこから、CSSを使用して各画像ファイルを配置できます。それぞれを基本として設定し、<img>すべてをの中に配置します<div>。そこから調べてみるposition: absolute;と、残りの部分がうまくいけばわかります。より具体的な質問がある場合は、遠慮なく質問してください。

于 2012-05-09T16:25:53.583 に答える