天猫的颜色选择效果怎么

Question

你是说，选择颜色之后，就改变旁边的图片？
这直接改变图片的src就行了啊。在点击选择颜色的时候，绑定一个点击事件，这个事件触发时，就去改变旁边那个img标签的src，变换图片。至于选择颜色的那个显示，那里是HTML和CSS做出来的，跟js没有关系的

Answer 1

我试验了一把，是在单机的时候可以加载img的src改变图片，但是我看了天猫的，小图他用的是a标签，我现在实验的是radio标签，看看这个怎么弄，我使用a标签后，我能提交form传值吗？

Answer 2

使用a标签时，在点击时，肯定会有js去变动图片的src的吧。这个时候，把对应的选择存入一个隐藏的input标签就行了，input标签会被form提交的。只用a标签不会传值的，反正用a标签做显示，用其他的方法进行传值，很平常的。

Answer 3

在网上搜索到radio美化代码，改了一下，代码如下，实现我要的功能。
<script>
  function myFun(sId) {
    var oImg = document.getElementsByTagName('img');    for (var i = 0; i < oImg.length; i++) {
      if (oImg[i].id == sId) {
        oImg[i].previousSibling.previousSibling.checked = true;
        oImg[i].style.border = '3px solid #FF6600';
oImg[i].style.margin = '-3px';
//alert("images/"+sId+".jpg");
document.images["ii"].src="images/"+sId+".jpg";
      } else {
        oImg[i].style.border = '0px';
oImg[i].style.margin = '0px';
      }
    }
  }
</script>
<img style="padding:10px;" name="ii" src="images/lb.gif" />
<div class="lanrentuku">
 <input type="radio" value= "lanrentuku" id= "111" name="aaa" style="display:none"> <img id="aa" src="images/y2.gif " onclick="myFun(this.id)"> 
 <input type="radio" value= "lanrentuku" id= "222" name="aaa" style="display:none"> <img id="bb" src="images/z2.gif" onclick="myFun(this.id)"> 
 <input type="radio" value= "lanrentuku" id= "333" name="aaa" style="display:none"> <img id="cc" src="images/y2.gif" onclick="myFun(this.id)">
</div>