06.03.2010, 19:08
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
Как-то так 
<!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>
Последний раз редактировалось Octane, 06.03.2010 в 19:12.
|
|
06.03.2010, 19:08
|
|
Кандидат Javascript-наук
|
|
Регистрация: 29.06.2009
Сообщений: 111
|
|
Кстати.
Если там сложные ресунки, а не просто цвета, то автономная полоумная мартышка-сортировшик может получится из нейронной сети. Они какраз для решения таких проблем идеальны. Здесь очивидный плюс то, что не нужно писать алгоритм(почти ). Но ончивидный минус, нужно иметь приличный набор уже отсортированных фоток. Это скорей решение для автономного расширения колекции. Еще оно сможет говорить "Это, что новый цвет?" Если не сможет опознать шаблон. Еще неприятно, то что изначально нужно иметь все возможные текстуры панелей так как научить ее класефицировать новый шаблон будет сложно, по мере роста количества шаблонов будет рости и ошибка, нужно будет наращивать структуру и полностью переобучать.
Последний раз редактировалось JAre, 06.03.2010 в 19:11.
|
|
06.03.2010, 19:08
|
 |
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
Сообщение от JAre
|
|
Во первых нужно добыть все фотографии и выяснить количество цветов. Отпределится с расширяемостью коллекции.
|
считайте что проект у Вас уже загнил, а ведь Вы его еще писать не начали.
1. Вы не знаете сколько будет фотографий
2. Вы их не добудете все
3. Количество цветов должно иметь возможность расширяться любым простым способом |
|
06.03.2010, 19:24
|
|
Кандидат Javascript-наук
|
|
Регистрация: 29.06.2009
Сообщений: 111
|
|
|
Оптимально:
Скрипт работающий с коллекцией (масивом) из N моделей на M текстур.
Например:
{
{Желтый куб, Желтый шар, Желтый цилиндр,...}
{Синий куб, Синий шар. Синий цилиндр,...}
{Красный куб, Красный шар, ПУСТО,...}
}
При нажатии на кнопки будет выбираться один из вариантов и отображаться.
Например, мы выбрали желтый цвет, значит скрипт строит панельку с кнопками отражающими:
{Желтый куб, Желтый шар, Желтый цилиндр,...}
Сам массив будет передаваться через AJAX с сервера.
Массив будет формировать серверный скрипт, на основании выборки из базы данных.
Базу данных забивать будут сами владельцы, для этого нужно создать простой интерфейс.
На чем работает сервер?
|
|
06.03.2010, 19:26
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
Ахахах еще и AJAX сюда давай прилепим  |
|
06.03.2010, 19:30
|
|
Кандидат Javascript-наук
|
|
Регистрация: 29.06.2009
Сообщений: 111
|
|
|
jquery решает.
|
|
06.03.2010, 19:33
|
|
Кандидат Javascript-наук
|
|
Регистрация: 29.06.2009
Сообщений: 111
|
|
|
Всё зависит от количества вариаций на одной странице. Беря во внимание расширяемость AJAX необходимость а не "фишечка"
|
|
06.03.2010, 19:36
|
|
Кандидат Javascript-наук
|
|
Регистрация: 29.06.2009
Сообщений: 111
|
|
|
Я про оверхед от лишних запросов. Конечно, можно переложть на серевр, но я не уверен, что это привдет к экономии ресурсов.
|
|
06.03.2010, 19:37
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
|
|
|
06.03.2010, 19:38
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
 еще и jQuery |
|
|
|
