А зачем дублировать навигацию? Там <select> вообще не нужен. Текст каждой ссылки содержит название цвета, которое можно выводить куда угодно, осталось дописать изменение value какого-нибудь <input type="hidden">, чтобы отправить ваш цветовой индекс на сервер. Ну а сами индексы цветов хранить, например, в выдуманном атрибуте color элемента <a>:
<!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;
width: 32px;
height: 32px;
margin: 10px;
text-indent: -9999px;
cursor: pointer;
border: 1px solid #000;
}
.brown {
background: #930;
}
.lilac {
background: #606;
}
.item .photo {
background: url(http://javascript.ru/forum/images/ca_serenity/misc/progress.gif) no-repeat center center;
}
</style>
<form action="" class="item">
Выбран цвет: <span class="color-name">Фиолетовый</span>
<input class="color-index" type="text" name="option_select_2" value="0:1" /> <!-- заменить тип на hidden -->
<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" color="0:0">Коричневый</a>
<a href="http://s60.radikal.ru/i169/1003/ce/51d329b4ca7c.jpg" class="color lilac" color="0:1">Фиолетовый</a>
</form>
<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;
}
function switchColorName(node, colorName) {
node.innerHTML = colorName;
}
function switchColorIndex(node, colorIndex) {
node.value = colorIndex;
}
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);
switchColorName(findClass("color-name", this)[0], target.innerText || target.textContent);
switchColorIndex(findClass("color-index", this)[0], target.getAttribute("color"));
return false;
}
};
}
}());
</script>
</body>
</html>
Вы на сайте забыли добавить однопиксельный прозрачный gif:
node.src = "адрес однопиксельного прозрачного gif";
Без него progress.gif не всегда можно будет увидеть во время загрузки.