Наложение изображения в HTML

Question

Я создаю простое интерактивное кукольное одеяние, в котором пользователь может выбрать разные атрибуты, чтобы назначить куклу через три отдельных раскрывающихся меню, таких как цвет волос, тип платья и т. Д. У меня есть базовое изображение, которое находится в 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; 
} 

Я дал каждый параметр в меню выбора значения, которое соответствует значению в выборе вара, здесь есть опция цвет волос:

<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, это не сработает. Может ли кто-нибудь что-нибудь, что может сработать?

Answer 1

Первое, что я замечаю, это output.innerHTML = "";, который избавится от вашего изображения base.png. Я предполагаю, что это то, что вы не хотите делать.

Итак, один способ справиться с этим - иметь все изображения, которые вам могут понадобиться уже там, но держать их скрытыми или с пустым атрибутом src, пока это не понадобится.

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

Тогда в вашей функции вы могли бы сделать что-то вроде этого.

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

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

Что касается заботы о наплавкой, вы должны будете использовать абсолютный position с z-indexing на каждом изображении внутри DIV с относительным позиционированием. Например, вот CSS styling, который отражает это.

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

---

Для позиционирования проще, я рекомендую держать большинство ваших подобных изображений, таких как различные типы волос, все же размера, в противном случае вам придется дать различный top и left CSS стайлинга сотрудничества -ограничения для каждого из них. Конечно, самый простой вариант - просто сделать все разные изображения одинакового размера.

Надеюсь, это помогло, и удачи!

Answer 2

Вы должны иметь возможность использовать абсолютное позиционирование, чтобы заставить его работать, поскольку все живет в div 'display_here'.

Вы также можете использовать холст HTML5, чтобы надеть одежду на куклу. Кажется прекрасной возможностью использовать его.