小编Nia*_*nna的帖子

我正在创建一个简单的交互式娃娃装扮游戏,用户可以通过三个单独的下拉菜单选择不同的属性来分配给玩偶,例如头发颜色,着装类型等.我有一个基本图像,在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中,因此无效.任何可能有用的东西都可以吗？