Показать сообщение отдельно
  #80 (permalink)  
Старый 10.03.2010, 11:58
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

А зачем дублировать навигацию? Там <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 не всегда можно будет увидеть во время загрузки.

Последний раз редактировалось Octane, 10.03.2010 в 12:02.
Ответить с цитированием