Существуют моменты когда необходимо предоставить пользователям выбор цвета какой либо вещи. Есть несколько способов выхода из этой ситуации.
Здесь я покажу очень простой и незамысловатый способ быстрой перекраски, на примере iPod Shuffle.
Сразу дам ссылку на то, что должно получиться в результате: ссылка
Краткий смысл таков и всем известен:
Нужная вещь отрисовывается в фотошопе с использованием полупрозрачных градиентов на однотонном фоне. После этого все сохраняется в png и на сайте просто меняется фон посредством js. Кто все знает может дальше не читать ;)
И так начнем с отрисовки нашего iPodа как примера к идеи.
Это наше исходное изображение. Кстати для этого удобнее отрисовывать уже отрисованные картинки ;) нежели фотографии.
В начале разбиваем его на основные элементы. Так как он прямоугольный это упрощает задачу.
Далее пытаемся добавить такие же тени и блики как на оригинале и сделаем нормальное отражение в полу.
Далее нарисуем кружок с кнопками. Выставляем параметры для слоя с кругом примерно как показано на скриншоте.
Добавляем пиктограммы и собственно в данном случае все. С другими предметами все может быть куда сложнее, но смысл понятен. Самое главное следите за тем, что бы при отключении всех слоев кроме слоя с фоновым квадратом он был одного сплошного (в будущем заменяемого цвета).
А потом удаляем зеленый квадрат оставляя прозрачное место. В результате должно получиться примерно так:
Теперь оживим это с помощью простенького js, применив для удобства jQuery.
Далее сделаем список с нашими иконками цветов. Для примера двумя. Фон может быть как цветом так и картинкой.
<ul class="ChangeColor">
<li>
<a style="background: #5db9b7;" onmouseover='change(this);'><img src="box.png" alt="" /></a>
</li>
<li>
<a style=" background: url('t1.png'); " onmouseover='change(this);'><img src="box.png" alt="" /></a>
</li>
</ul>Сама же перекрашиваемая вещь будет такой:
<img src="form.png" id="color" alt="" style="background: #000;" />Оформим все с помощью css. Например у меня на скорую руку вышло так:
#color {margin: 15px 0 0 0;}
ul.ChangeColor {margin: 0; width: 336px; background: #f3f3f3; border: 1px solid #efefef; padding: 25px 25px 40px 25px; display: table;}
ul.ChangeColor li {float: left; list-style: none; margin: 15px; width: 50px; height: 50px;}
.ChangeColor a, .ChangeColor a:hover {border: 8px solid #e3e3e3; cursor: pointer; display: block; width: 50px; height: 50px;}
.ChangeColor a.act, .ChangeColor a.act:hover {border: 8px solid #cdcdcd;}Вот собственно и все. И незабуддте про укрощение png в IE6 ;) Но про это уже слишком много писали у каждого свои способы.
Так же вам могут понадобится еще уроки по отрисовке вещей. В журнале www.smashingmagazine.com есть подборка статей на эту тематику.
Немного поразмыслив вы сможете придумать кучу вариаций на тему покраски вещей и зачем это нужно ;)
спасибо за помощь kellion
UPD: Пример использования от Tvarb
