Javascript-форум - Как зделать такое?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как зделать такое? (https://javascript.ru/forum/dom-window/8069-kak-zdelat-takoe.html)

Как-то так :)

<!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>

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

Цитата:

Сообщение от JAre (Сообщение 46979)

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

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

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

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

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

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

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

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

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

jquery решает.

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

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

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

:lol: еще и jQuery