Как зделать такое?
 

Долго копался по интернету, ничего похожего не нашел...
Как сделать вот такую фигню

При клике на квадратик с цветом, фотка слева меняется...
Кто нить помогите! Кинте скриптом, или советом...

Вариантов много. Один из:
сделать спрайт из возможных вариантов, прописать для кааждого варианта
class, который менял бы координаты top свойства background-position, а при клике, просто добавлять/убирать тот или иной класс.
Про события можно почитать тут

Gibor21,
обычное дело, ставьте событие при клике на картинку с цветом, если выбрана картинка с красным цветом - загружать подстолье с этим цветом.
На каждое подстолье - своя цветная картинка.

Блин, спасибо!:)

Тут попробовал сделать, и никак не получается, может я не так понял.
:(
Не могли бы вы, привести пример с кодом, для наглядности?

А в чем проблема? Нужно просто две картинки с разным з-индексом. На верхней основная часть а на той, что внизу, то что нужно менять. В верхней картинке нужно сделать вырез (прозрачность) и через нее будет видно нижнюю. Еще можно сделать 3 картинки. Работает так:
1. Верхняя с прозрачностью.
2. С текущим цветом. 100% непрозрачность слоя
3. С цветом на который переключаемся. 0% непрозрачность слоя
И с определенной скоростью прозрачность одного слоя уменьшается, а второго увеличивается. Вроде бы красиво :)

Верхняя часть

Рисунок или просто цветная панель - подложка.

Результат:


При нажатии на кнопку можно просто менять стиль подложки на нужный цвет.

PS. Только дырку вырезать нужно аккуратно.

JAre, конкретно для этого случая — это неоправданно сложный и неудобный вариант. Легче и лучше просто сделать смену картинки.

За то очень легко добавить новые цвета и анимацию. Вообще, всё зависит от количества цветов и моделей.

А почему неудобный? Там так и так нужен JS или можно CSS обойтись? В моем варианте тоже только стили нужно свапать.

Дешевый для себя вариант и самый правильный менять фотки которые потребовать у заказчика, дорогой для себя вариант попробовать их красить - выйдет уродливо, но дешево для заказчика(этот вариант не верный т.к. выйдет точно и проверено уродливо если не использовать 3D).

Кому легко? Все владельцы и сотрудники магазинов сантехники умеют работать в профессиональных графических редакторах и вырезать прозрачные области в картинках? Или при добавлении каждой позиции в каталог предлагаете обращаться к специалисту? А еще редакторы денег стоят. И времени на такую подготовку изображения к публикации уйдет гораздо больше. И не для всех случаев подойдет этот вариант…

Gozar

Нормально выйдет. нужно использовать PNG с правельной прозрачностью. Можно на 99% эмулировать 3D проекцию даже с бликами и тенью.

Octane
Допустим у них есть 5 моделей умывальника. Значет нужно сделать 5 шаблонов с прозрачностью. Расцветку вообще может задавать покупатель через стандартное меню "колор пикер" Единственный гемморой это добавление новых моделий умывальников. Но это даже хорошо для дизайнера.

А 3D это не удобно так как у Флеша нет хардварного режима, а софтварный рэндэринг маламайски детализированного умывальника на офисных комрьютерах ничем хорошим не кончится. Но можно использовать O3D оно имеет хардварную поддержку и такого уровня сцена должна обрабатываться даже встроенными картами. Если у них е сть умывальники в CAD системе монжо вполне легко экспортировать. O3D поддерживает стандарт COLLADA. А сценку можно из пройстейшей демки замастрячить. Тогда можно будет крутить как хош и менять цвета. Но проблемма в том, что это требует небольшого объема спец. подготовки - хорошо для общего развития. Но главная проблемма, что O3D плагин и поддерживается он Хромом и Огнелисом. В IE и Опере не уверен.

Ребят, эти тумбочки просто как вариант, на самом деле лучше чтоб вся картинка менялась, я примерно так и думаю, при клике картинка на этом месте подгружаеться другая в другом цвете, картинки нарисовал уже во всех цветах вот такого плана они:

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

Я еще хочу потом подвязать это к элементу <select> чтобы при клике не только картинка менялась, но и нужная опция в селекте.
вот вобще, то что я делаю http://vinylroom.ru

Картинка которая меняет цвета, будет прям над палитрой с цветами.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
</head>
<body>

<div><img id="cvet_cota" style="background-color:#0F0" src="http://img684.imageshack.us/img684/1816/cot.png"/><div>
<input type="button" value="GREEN" onClick="$('#cvet_cota').attr('style','background-color:#0F0')" />
<input type="button" value="RED" onClick="$('#cvet_cota').attr('style','background-color:#F00')" />
<input type="button" value="BLUE" onClick="$('#cvet_cota').attr('style','background-color:#00F')" />
</body>
</html>

Гну свою линию :)

Сначала сделайте пару таких проектов, а потом гните линию. А то она и без вас согнется и вас согнет. Для каждого "разноформенного унитаза" писать бедете, а если их сотни три?

Про унитазы это я так абстрактно :)

Я лиш предложил один из путей и привел пример самой простой реализации. Так же указал плюсы и минусы. Это может быть как лучший так и худший путь взависимости от компитенции дизайнера и соотношение количество моделей унитазов\ количество цветов.

PS. Тумбочка очень похожа на рендер. Если у них есть все эти модели то ниткаких проблем с созданием масок нет. Небольшой скрипт и 200 масок унитазов за пол часа работы :) За то экономия времени при смене цвета + экономия трафика.

Даже если у них есть все 200 рисунков унитазов помножить на 10 цветов. То это две тыщи картинок и их нужно рассортировать по цветам. Но, конечно, можно написать скрипт который будет выбирать доминантный цвет из палитры и автоматически сортировать. Но это А - не надежно. Б - теже пол часа.

ИМХО выбор не так очевиден...

Самая большая проблема заказчика, что у него обычно нет и одной нормально сфотографированной модели, а вы тут "Если!"

К тому же обрабатывание фоток удорожает проект. 200 масок за полчаса похоже на гон. неважного дизайнера.

Ладно я тут нашел вариант с разукрашками: http://www.acryline.ru/ и там тыкаем на фасады, смотрится все равно уродливо, а ведь дизайнер похоже очень старался.

Не похоже на разукраски. Там у поверхности дисперсия разная.

Нужно настроить рендер на создание масок из готовой модели. Не слишком сложная задача. Маска должна хранить блики (они у физичиских тел обычно белые) и тени (черные) а основной (дифузия) цвет может быть подставлен. Качество высокое. Но нельзя менять рассеиванье, количество отраженного света, блик.

Но раз там даже фоток нет...

Интересно, как они изготавливают эти ящики. Всё же обычно, на современных предприятиях, должен быть чертеж в каком-то АвтоКаде. А он умеет делать модели.

Вот это я и называю гон. Там все разукраски или вы думаете они вам кухню переделывали 20 раз? На отражение ящика посмотрите.

И это решение воистину программиста.

Это не разукраски. Это сцена в каком-то 3D MAX с немного подредактированными материалами и X-часовым процесом рендера.

На старых машинах может доходить до нескольких дней :)

Нужно просто правильно поставить вопрос:
1. Чего я хочу добится в идеале.
2. Что я умею.
3. С каким материалом мне предстоит работать.

Во первых нужно добыть все фотографии и выяснить количество цветов. Отпределится с расширяемостью коллекции.

Если это 10 моделей по 5 цветов = 50 то дело в шляпе.
Но если это 100 моделей по 5 цветов это одна проблемма. И если это 5 моделей по 100 - совсем другая.

Еще для решения нужно знать количество мартышек - сортировщиков. Для сортировки тысячи фотографий нужно мнооого мартышкочасов. Но это всё может сделать скрипт. Но нужно знать иметь данные. Трёх мерная модель - замечательно. Сжатая фотка низкого разрешения - ужасно, но то же можно разрулить (сложность зависит от палитры цветов)

Как-то так :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
	<style type="text/css">
		.item .color {
			display: block;
			overflow: hidden;
			width: 32px;
			height: 32px;
			margin: 10px;
			text-indent: -9999px;
			cursor: pointer;
			border: 1px solid #000;
		}
		.brown {
			background: #930;
		}
		.lilac {
			background: #606;
		}
		.blue {
			background: #00F;
		}
		.item .photo {
			background: url(http://javascript.ru/forum/images/ca_serenity/misc/progress.gif) no-repeat center center;
		}
	</style>
	
	<div class="item">
		<img class="photo" src="http://s60.radikal.ru/i169/1003/ce/51d329b4ca7c.jpg" alt="" width="278px" height="400px" />
		<a href="http://s004.radikal.ru/i206/1003/17/9edf0ad0c180.jpg" class="color brown">Коричневый</a>
		<a href="http://s60.radikal.ru/i169/1003/ce/51d329b4ca7c.jpg" class="color lilac">Фиолетовый</a>
	</div>

	<div class="item">
		<img class="photo" src="http://img176.imageshack.us/img176/4331/64303672.png" alt="" width="619px" height="273px" />
		<a href="http://img176.imageshack.us/img176/4331/64303672.png" class="color white">Белый</a>
		<a href="http://img299.imageshack.us/img299/513/fing.png" class="color blue">Синий</a>
	</div>

	<script type="text/javascript">
		function hasClass(element, className) {
			return (" " + element.className + " ").indexOf(" " + className + " ") != -1;
		}
		function findClass(className, root) {
			root = root || document;
			if (root.getElementsByClassName) {
				return root.getElementsByClassName(className);
			}
			if (root.querySelectorAll) {
				return root.querySelectorAll("." + className);
			}
			var elements = [], allElements = root.getElementsByTagName("*"), length = allElements.length, i = -1, j = 0;
			while (++i < length) {
				if (hasClass(allElements[i], className)) {
					elements[j++] = allElements[i];
				}
			}
			return elements;
		}
		
		(function () {
			function switchImage(node, src) {
				node.src = "адрес однопиксельного прозрачного gif";
				node.src = src;
			}
			var items = findClass("item"), i = items.length;
			while (i--) {
				items[i].onclick = function (e) {
					e = e || window.event;
					var target = e.target || e.srcElement;
					if (hasClass(target, "color")) {
						switchImage(findClass("photo", this)[0], target.href);
						return false;
					}
				};
			}
		}());
	</script>
</body>
</html>

Кстати.
Если там сложные ресунки, а не просто цвета, то автономная полоумная мартышка-сортировшик может получится из нейронной сети. Они какраз для решения таких проблем идеальны. Здесь очивидный плюс то, что не нужно писать алгоритм(почти :) ). Но ончивидный минус, нужно иметь приличный набор уже отсортированных фоток. Это скорей решение для автономного расширения колекции. Еще оно сможет говорить "Это, что новый цвет?" Если не сможет опознать шаблон. Еще неприятно, то что изначально нужно иметь все возможные текстуры панелей так как научить ее класефицировать новый шаблон будет сложно, по мере роста количества шаблонов будет рости и ошибка, нужно будет наращивать структуру и полностью переобучать.

считайте что проект у Вас уже загнил, а ведь Вы его еще писать не начали.
1. Вы не знаете сколько будет фотографий
2. Вы их не добудете все
3. Количество цветов должно иметь возможность расширяться любым простым способом

Оптимально:
Скрипт работающий с коллекцией (масивом) из N моделей на M текстур.
Например:
{
{Желтый куб, Желтый шар, Желтый цилиндр,...}
{Синий куб, Синий шар. Синий цилиндр,...}
{Красный куб, Красный шар, ПУСТО,...}
}

При нажатии на кнопки будет выбираться один из вариантов и отображаться.

Например, мы выбрали желтый цвет, значит скрипт строит панельку с кнопками отражающими:
{Желтый куб, Желтый шар, Желтый цилиндр,...}

Сам массив будет передаваться через AJAX с сервера.
Массив будет формировать серверный скрипт, на основании выборки из базы данных.

Базу данных забивать будут сами владельцы, для этого нужно создать простой интерфейс.

На чем работает сервер?

Ахахах еще и AJAX сюда давай прилепим :D

jquery решает.

Всё зависит от количества вариаций на одной странице. Беря во внимание расширяемость AJAX необходимость а не "фишечка"

Я про оверхед от лишних запросов. Конечно, можно переложть на серевр, но я не уверен, что это привдет к экономии ресурсов.

Вот еще одно такое решение: http://divannadom.ru/catalog/nshowall/?mid=81

:lol: еще и jQuery