Изменения фона с текстурой.(Вопрос подхода, а не кода.)
 

Есть несколько картинок, в частности 7. Все они представляют из себя элементы дома вырезанные по группам.
Задача раскрашивать разные элементы дома в разные цвета.
Первоначальная идея состояла в том что бы ставить background, собственно говоря вот готовое решение: http://poe.bl.ee/1/dom.html.

Даже с двумя элементами проблема решается, но когда элементов становиться больше 2х, я встаю в тупик. Вот этот дом со всеми вырезанными слоями http://poe.bl.ee/1/dom2.html.

Вопрос не столько по коду, сколько по подходу. Как можно решить проблему. Единственно что я придумал это лепить кучу дивов невообразимой формы, цвет которых и менять.

Если нет идей по подходу, спрашиваю как сделать див с разным углом наклона каждой из сторон. То есть что бы див был полностью неправильный.

Так же моя проблема решается если есть способ закрасить только полностью прозрачную часть картинки, а полупрозрачную не закрашивать(http://poe.bl.ee/1/101.png). Или же наоборот, закрашивать только видимую часть картинки, а прозрачную не трогать(http://poe.bl.ee/1/100.gif).

Как и всегда с картинками - юзать canvas или svg, в зависимости от того что проще для задачи вектор - или растр.

Самая мякотка в том, что палитра гифок может быть заменена влет. Я когда делал первую веб-страницу долго не мог найти у тогда еще фронтпейджа, где у него кнопка анимирования палитры. Оказалось браузеры этого не умеют. А вот 3DS и Аниматор той же конторы - умели, но там эти гифки назывались .cell

То есть в теории вы просто берете несколько ячеек из поллитры и меняете их RGB значения - девайсу деваться некуда - перекрасит. На практике х нанэ. Да и вообще гифки - вчеращний день.

На канвасе делайте. Там все просто. Хтмлем - заколебетесь конкретно.

Самое простое в том же канвасе - меняйте просто цвет, а не раскрашивайте. Один хрен юзер ничего не понимает в RGB. Самый лучший базовый цвет для перекраски - зеленый. То есть Hue'м он реально меняется почти по всему гамуту. Яркость и насыщенность точно так же можно менять.

kostyanet, ну на самом деле я таким извращением с палитрами gif даже занимался, в тот короткий промежуток времкни когда data:uri уже был, а canvas ещё не было.)

А, точно, прикол, можно же отпарсить букафки, спасибо, запомню. :)

ТСу, как дизигнер советую не вставлять движки и гамуты, а скачать фирменные поллитры с красочных сайтов типа тикурилы или пантонов, сгенерить на клиенте по данным и пусть юзер тычет прокручивая квадратики. Посмотрите как сделано в программах и сделайте так же. Я сам до сих пор не понимаю RGB, потому что всю жизнь провел в CMYK, а обычному человеку и то и другое что барану новые ворота.

Поразбираюсь в Вами написанном, но позже. Спасибо всем за помощь. Решил использовать canvas.
2 элемента у меня будут менять друг друга фоном, это оконтовочки окон и сам фасад, а все остальные элементы будут меняться путём рисования в canvas соответствующего многоугольника.
Да я извращенец, но так как js знаю слабо, о способе работы canvas узнал вчера и только три функции .moveTo .lineTo и .fill(), приходиться выкручиваться. Да и нужно это к 11 часам сегоднего числа.

Готовое решение будет лежать скорее всего по тому же адресу. Сможете поржать над тонной кода

ff.beginPath();
		ff.fillStyle = '#00f';
		ff.moveTo(134, 450);
		ff.lineTo(324, 54);
		ff.lineTo(1910, 160);
		ff.lineTo(2700, 470);
		ff.lineTo(2663, 529);
		ff.lineTo(2452, 505);
		ff.lineTo(2458, 506);
		ff.lineTo(2742, 704);
		ff.lineTo(2707, 740);
		ff.lineTo(2209, 402);
		ff.lineTo(1509, 674);
		ff.lineTo(1174, 708);
		ff.lineTo(1170, 693);
		ff.lineTo(1167, 693);
		ff.lineTo(1163, 673);
		ff.lineTo(1157, 673);
		ff.lineTo(1154, 658);
		ff.lineTo(1154, 651);
		ff.lineTo(2092, 360);
		ff.lineTo(1896, 228);
		ff.lineTo(1424, 376);
		ff.lineTo(611, 277);
		ff.lineTo(330, 125);
		ff.lineTo(328, 128);
		ff.lineTo(140, 504);
		ff.lineTo(134, 450);
		ff.fill();

Смысла особого нет, так как это чисто примерка. Всё равно матрица заказщика, фильтр из черно белой gif с opacity 0.5 и глаз человека не имеющего отношение к графике дают о себе знать.
Это внутренний продукт одной конторки, а пикер я украл не плохой, так что я думаю в нём-то они подберут цвет. Тем более это было желание заказщика иметь имнно пикер. И со временем напряженка.

Всем спасибо. Но тему извращений в этой области можно продолжить.

Вроде было желание заливать только полностью прозрачное? На canvas это возможно с помощью imageData (массива пикселей) - просто перебрать все и поменять те что с полной прозрачностью.
Также можно каждые группы секторов что должны иметь свой цвет раскрасить на картинке заранее, а потом при переборе менять на нужный.