Как сделать что-то типа калькулятора, только из изображений?

Question

[Дмитрий]

Вообщем, есть калькулятор - prntscr.com/jgaeoq
Я хочу сделать так, чтоб когда я выбрал тип ангара "Арочный", потом наложил на него окна, краску и т.д. После чего, когда поменял на другой тип ангара, то все остается только меняется картинка на другой тип ангара. Либо чтоб когда человек меняет тип анагра, форма обнулялась.

То есть, выбрал 1 тип и накладываю на него свои примбобасы. Выбираю 2 тип, так же накладываю примбобасы но уже другие.
НУ примерно как на этом сайте - сайт

Answer 1

[Сергей Соколов]

Дизайнер вам пусть отрисует послойные картинки, где выбираемые элементы будут PNG слоями с прозрачностью. JavaScript'ом вы просто включаете/выключаете видимость слоёв бутерброда.

В приведённом примере так и сделано. См., например, слой с одними только воротами - с прозрачным фоном.

Comments

[Дмитрий]

Самый простой вариант я так понимаю это?

[Saboteur]

refreak, еще вариант сделать крупное изображение со всеми нужными частями и сдвигать его, чтобы отображалось то что нужно сейчас.

[Сергей Соколов]

Как проще я не знаю. Отрисовывать придётся для каждого типа ангара все опции. Либо все возможные комбинации, либо вот так, наложением, если это подходит.

[Дмитрий]

Сергей Соколов, тогда нужно как в примере обнулять значение формы + под каждый тип анагара свои картинки. Вот тут уже возникает проблема как это реализовать.

[Сергей Соколов]

refreak, описать каждый ангар структурой типа

{
	"название ангара 1": {
		"стены": {
			"прямые":      "an1/walls_straight.png",
			"скруглённые": "an1/walls_round.png",
		},
		"двери": {
			"тип-1": "an1/doors_type1.png",
			"тип-2": "an1/doors_type2.png",
		},
		// ... 
	}	
}