Overlaying image in HTML

问题

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?

回答1:

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!