Question

我正在创建一个简单的互动娃娃装扮游戏，用户可以通过三个单独的下拉菜单选择不同的属性来分配给玩偶，例如头发颜色，着装类型等。我有一个div中的基本图像，我想将图像叠加到上面。

<div id="display_here"> 
<img src="base.png" />
</div>

图像由函数调用：

function createDoll(userChoice) {
var output = document.getElementById("display_here");
output.innerHTML = "";


var links = [
    "redhair.png",
    "blondehair.png",
    "brownhair.png",
];

var choices = ["Red", "Blonde", "Brown", "Vintage", "Skater", "Plaid", "Heels", "Brogues", "Pumps"];

var img = '<img src="' + links[userChoice] + '">';

output.innerHTML = img;
}

我在选择菜单中给出了一个与var选项中的值对应的值，这里是头发颜色选项：

<p>
What hair will your doll have?
<select name="choice" id="choice" onchange="createDoll(this.value)">
<option value="0">Red</option>
<option value="1">Blonde</option>
<option value="2">Brown</option>
</select>
</p>

因此，对于每个选项，我希望它覆盖到基本图像上，但我尝试的任何内容似乎都无效。我似乎唯一能找到的就是“位置：相对”和“位置：绝对”解决方案，但由于我的图像不在div中，因此无效。任何可能有用的东西都可以吗？

Answer 1

您应该能够使用绝对定位使其正常工作，因为所有内容都存在于'display_here'div中。

你也可以使用HTML5 Canvas将衣服画在娃娃身上。似乎是一个使用它的绝佳机会。

Answer 2

我注意到的第一件事是output.innerHTML = "";，它将摆脱你的base.png图片。我认为这是你不想做的事情。

因此，处理此问题的一种方法是拥有您可能需要的所有图像，但保留它们或使用空src属性，直到需要为止。

<div class="overlay-container"> 
    <img class="overlay" src="base.png">
    <img class="overlay" id="hair">
    <img class="overlay" id="clothing1">
    <img class="overlay" id="clothing2">
</div>

然后在你的函数中，你可以做这样的事情。

function createDoll(userChoice) {
    var links = [
        "redhair.png",
        "blondehair.png",
        "brownhair.png"
    ];

    document.getElementById('hair').src = links[userChoice];
}

至于照顾重叠，你需要在div内的每个图像上使用position和z-indexing进行相对定位。例如，这里有一些CSS styling反映了这一点。

.overlay { position: absolute; }
.overlay-container { position: relative; }
#hair { z-index: 10; }
#clothing1 { z-index: 20; }
#clothing2 { z-index: 21; }

为了使定位更容易，我建议保留大部分相似的图像，例如不同的头发类型，大小相同，否则你必须提供不同的top和left CSS样式每个人的协调。当然，最简单的选择是让所有不同的图像大小相同。

我希望这有一些帮助，祝你好运！

用HTML覆盖图像

2 个答案: