Соберите несколько изображений мебели, чтобы имитировать изменение цвета - PullRequest
Новая
       7

Соберите несколько изображений мебели, чтобы имитировать изменение цвета

1 голос
/ 25 февраля 2011

Я работаю над сайтом для производителя мебели.На сайте мы часто используем jQuery.

Я хочу, чтобы детали мебели меняли цвета, поэтому я думаю, что я сделаю деление с основной мебелью и оверлей с тем, что может изменить цвет.Div оверлея будет содержать маскированный PNG текущей мебели выбранного цвета.

Затем я хочу показать 10-15 различных цветов (которые будут прозрачными, маскированные PNG).

Myпроблема в том, как подобрать подходящую мебель с правильным наложением PNG.

Если у меня есть скамейка, стол и стул, например, каждый с 10-15 наложениями.Как их объединить, чтобы они работали правильно и не устанавливали наложение на стол сверху стула?

Заранее спасибо.

1 Ответ

0 голосов
/ 01 марта 2011

У меня был бы такой держатель: 

<div id="chair_holder" style="background-image:url(chair.png)">
    <img class="overlay red" src="red_chair.png"/>
    <img class="overlay green" src="green_chair.png"/>
    <img class="overlay blue" src="blue_chair.png"/>
    etc...
</div>

за каждый предмет мебели. Затем я могу показать определенный цвет наложения для данного держателя, например: 

function showColorOverlay(holder_id, color)
{
    var holder = $('#' + holder_id); //  Get the holder by id
    $('.overlay', holder).hide(0); //  Hide all overlays
    $('.' + color, holder).show(0); //  Show the correct overlay
}

тогда я мог бы вызвать showColorOverlay ('chair_holder', 'red'); например, показать красный стул.

Если загрузка всех этих PNG-файлов замедляет работу страницы (используйте pngcrush, чтобы сделать их как можно меньше), вы можете их бездействовать в showColorOverlay.

...