javascript - 如何重叠 "build your own t-shirt"产品显示页面的 PNG 图像 - javascript/css/asp

Question

我用经典 ASP 构建了我的 CMS(是的，我知道它很旧)。 它有一个购物车和支付系统。 除了标题、价格、缩略图等之外，我正在为任何产品添加功能:“用于堆叠的图像”。

因此，例如，如果您销售 T 恤，页面上的一个“产品”将是“衬衫款式”，它有自己的 PNG 与之关联。同一页面上的下一个“产品”将是“衬衫颜色”。然后是“标志”或“文字”。这些元素中的每一个都会影响页面左侧的一个图像，以便这些 PNG“堆叠”以创建最终产品的外观。

我的弱项是 javascript 和 css。有没有人有一些代码或线索可以帮助我？

哦，还有数百张图片，所以请提供有关如何让它们动态加载而不是在页面加载时尝试加载所有图片的提示。

谢谢各位程序员!

Answer 1

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');