javascript - 在 HTML 中叠加图像

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 choices 中的值，这里是头发颜色选项:

<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>

因此，对于每个选项，我都希望它覆盖到基本图像上，但我尝试过的任何方法似乎都不起作用。我似乎唯一能找到的是“position:relative”和“position:absolute”解决方案，但由于我的图像不在 div 中，所以这行不通。任何人都可以做任何可能有用的事情吗？

Answer 1

我首先注意到的是 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];
}

至于处理覆盖，您需要使用绝对 position与 z-indexing在具有相对定位的 div 内的每个图像上。例如，这里有一些 CSS styling这反射(reflect)了这一点。

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

---

为了更容易定位，我建议保留大部分相似的图像，例如不同的头发类型，所有相同的尺寸，否则你将不得不给出不同的 top和 left每一个的 CSS 样式坐标。当然，最简单的选择是让所有不同的图像大小相同。

希望对您有所帮助，祝您好运!