在HTML中叠加图像

问题描述

我正在创建一个简单的互动娃娃装扮游戏，用户可以通过三个单独的下拉菜单选择不同的属性分配给娃娃，例如发色，连衣裙类型等。
我有一个基地

 < div id =display_here>这是我想叠加图像的div中的图像。 
< 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> 
你的娃娃有什么头发？ 
 < option value =0>红色< / option> 
< option value =1> Blonde< / option> 
< option value =2> Brown< / option> 
< / select> 
< / p> 
  

因此，对于每个选项，我希望它覆盖到基本图像上，但我没有尝试过似乎可以工作。我似乎能够找到的唯一一件事就是'position：relative'和'position：absolute'解决方案，但由于我的图片不在div中，因此无法工作。任何人都可以使用任何可能的工作？

解决方案

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

因此，处理这个问题的一种方法是获得你可能需要的所有图像，但是，将它们隐藏或用空的 src 属性直到需要。

 < ; div class =overlay-container> 
< img class =overlaysrc =base.png> 
< img class =overlayid =hair> 
< img class =overlayid =clothing1> 
< img class =overlayid =clothing2> 
< / div> 
  

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

 函数createDoll（userChoice）{
 var links = [
redhair.png，
blondehair.png，
brownhair.png
]; 
 
 document.getElementById（'hair'）。src = links [userChoice]; 
} 
  

至于重叠覆盖，您需要使用绝对使用。 mozilla.org/en-US/docs/Web/CSS/z-indexrel =nofollow> z-index ing 一个具有相对定位的div。例如，下面是一些，反映了这一点。

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


---

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

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

>

I am creating a simple interactive doll dress up game where the user can pick different attributes to assign to the doll through three separate drop down menus, such as hair colour, dress type, etc.I have a base image that is in a div which I want to overlay the images onto.

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

The images are called by a function:

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

I have given each option in the select menu a value which corresponds to the value in var choices, here is the hair colour option:

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

So for each option I want it to overlay onto the base image but nothing I have tried seems to work. The only thing I seem to be able to find on this is the 'position:relative' and 'position:absolute' solution but since my images are not in a div this won't work. Can anybody thing of anything that might work?

解决方案

The first thing I notice is output.innerHTML = "";, which will get rid of your base.png image. I assume this is something that you don't want to do.

So, one way to handle this is to have all the images that you might need already there, but keep them hidden or with an empty src attribute until needed.

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

Then in your function, you could do something like this.

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

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

As for taking care of the overlaying, you'll need to use an absolute position with z-indexing on each image inside of a div with relative positioning. For example, here is some CSS styling that reflects this.

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

---

To make positioning easier, I recommend keeping most of your similar images, such as different hair types, all of the same size, otherwise you'll have to give different top and left CSS styling co-ordinates for each one. Of course, the simplest option is to just make all of the different images the same size.

I hope this has been of some help, and good luck!

这篇关于在HTML中叠加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！