Question

I built my CMS with Classic ASP (yeah, I know it is old).
It has a shopping cart and payment system.
I’m adding in the capability for any product to have, in addition to title, price, thumbnail image, etc.: “image for stacking”.

So, for example, if you are selling t-shirts, one “product” on the page would be “shirt style” which has it’s own PNG associated with it. The next “product” on the same page would be “shirt color”. Then “logo” or “text”. Each of these items will influence one image over on the left of the page so that these PNGs “stack” to create what the end product will look like.

What I’m weak on is javascript and css. Does anyone have some code or clues to help me out?

Oh and there are hundreds of images so also, please, tips on how to make them load on the fly instead of trying to load in all images when the page loads.

Thank you, fellow programmers!

Answer 1

The CSS property position:absolute lets you place elements above each other and z-index controls the stacking order, so use them to get it all setup right.

Then to load on the fly use javascript to change the src of any of the existing element to whatever you need it to be, like this. (using 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');