用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选项中的值相对应的值,这里是头发颜色选项:

<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

我注意到的第一件事是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 内的每个图像上使用ing 的绝对位置。例如，下面是一些反映这一点的CSS 样式。z-index

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

为了使定位更容易，我建议保留大部分相似的图像，例如不同的头发类型，全部具有相同的尺寸，否则您必须为每个图像提供不同的topCSSleft样式坐标。当然，最简单的选择是使所有不同的图像大小相同。

我希望这对您有所帮助，祝您好运！