Как-то так
<!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>