Nakładanie obrazu w HTML

Question

Tworzyłem prostą interaktywną grę ubieranki dla lalek, w której użytkownik może wybrać różne atrybuty przypisane do lalki za pomocą trzech osobnych rozwijanych menu, takich jak kolor włosów, typ ubioru itp. Mam obraz podstawowy, który znajduje się w div, na który chcę nakładać obrazy.

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

obrazy są nazywane przez funkcję:

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

dałem każdą opcję w menu wyboru wartości, która odpowiada wartości w wyborach Var, tutaj jest opcja kolor włosów:

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

Tak więc dla każdej opcji chcę, aby nakładała się na obraz podstawowy, ale nic, co próbowałem, wydaje się działać. Wydaje mi się, że jedyną rzeczą, na którą mogę się natknąć, jest rozwiązanie "position: relative" i "position: absolute", ale ponieważ moje obrazy nie znajdują się w div, to nie zadziała. Czy ktokolwiek może cokolwiek zdziałać?

Answer 1

Pierwszą rzeczą, którą zauważam jest output.innerHTML = "";, która pozbędzie się twojego obrazu base.png. Zakładam, że to jest coś, czego nie chcesz robić.

Jednym ze sposobów, aby sobie z tym poradzić, jest posiadanie wszystkich obrazów, które mogą być już potrzebne, ale zachowaj je w ukryciu lub z pustym atrybutem src, dopóki nie będzie potrzebne.

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

Następnie w swojej funkcji możesz zrobić coś takiego.

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

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

chodzi o dbanie o nakładanie, musisz podać bezwzględną position z z-indexing na każdym obrazie wewnątrz div z pozycjonowania względnego. Na przykład tutaj jest jakiś CSS styling, który to odzwierciedla.

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

---

Aby ułatwić pozycjonowanie, polecam utrzymując większość twoich podobnych zdjęć, takich jak różnego rodzaju włosów, wszystkie tej samej wielkości, w przeciwnym razie będziesz musiał dać inny top i left CSS stylizacji współpracy -jednakowe dla każdego. Oczywiście, najprostszą opcją jest po prostu zrobienie wszystkich różnych obrazów tego samego rozmiaru.

Mam nadzieję, że pomogło to i powodzenia!

Answer 2

Powinieneś być w stanie użyć pozycjonowania absolutnego, aby działało, ponieważ wszystko jest w div 'display_here'.

Możesz także użyć Canvas HTML5, aby narysować ubrania na lalce. Wydaje się być doskonałą okazją, aby z niego skorzystać.