JS切换图片

Question

我有大概10个图片，每个图片的名称都不同，每个图片有两种状态，分别为选中和不选中，对应的图片为a1.png和a2.png，我的目标是：当鼠标移动到图片上的时候显示为选中即a1.png，鼠标移开为不选中即a2.png，当鼠标点击的时候onclick意味着这个图片被选中，鼠标离开的时候仍然是选中状态即a1.png,这样的10张图片放在一起，提交的时候只能提交一种，要得到这个图片的值，类似于单选框的效果，请问应该如何实现？谢谢！

Answer 1

button.onmouseover = function(){
  图片切换为a1.png（可通过更改class，用样式表来切换）
}
button.onmouseout = function(){
   图片切换为a2.png
}
button.onclick = function(){
   图片切换为a1.png
}

Answer 2

用hidden表单传数据至服务器变换图片
imgDom.src=...变换图片的时候记得记录当前的图片是什么类型,把这个值放在hidden表单中,就可以了!

Answer 3

1、给每个<img ／>分别设置click,mouseover,mouseout事件
2、onmouseover事件处理函数中 设置src="a1.png",onmouseout事件处理函数中 设置src="a2.png",onclick事件处理函数中设置src="a1.png"
3、把改变的src值保存在一全局变量中用于提交

Answer 4

使用Jquery
var img_group = new Array(10);    //define pic array
img_group['a']  = ["a1.png","a2.png"];
img_group['b']  = ["b1.png","b2.png"];
....function change(selected_value){
      var obj = $('#' + selected_value);
      var ref = obj.attr('ref');
     var index = 0;
      if(ref=="0") index = 1;
// firstly clean up all checked options.     
        for(var key in img_group){
         $('#' + key).attr('src', img_group[key][0]);
         $('#' + key).attr('ref',0);
        }        
// checked selecte one
       obj.attr('src',img_group['' + selected_value][index]);
        obj.attr('ref',index);
        return selected_value;
    }<img id="a" class="button" src="a1.png" width="90" height="59"  onClick="change(a)" ref="0" />