我正在创建一个简单的互动娃娃换装游戏,用户可以通过三个独立的下拉菜单选择不同的属性来分配给娃娃,例如发色、衣服类型等。
我有一个基础图像,在 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;
}
我已经给选择菜单中的每个选项赋值,这些值对应于变量 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中,这种方法行不通。有人能想到任何可能有效的解决方案吗?
class
名称,请查看此链接http://jsfiddle.net/LQRT5/9/。 - DaniP