补充一下使用场景:如果鼠标点击了A,当时的情况A显示为 A3.JPG,其它均为B1.JPG,C1.JPG........同时,鼠标移动到B,C,D...时,A3.JPG不变,移动到B显示B2.jpg,移动到C显示C2.jpg,..同时,当鼠标点击C时,C显示为C3.JPG,  A3.jpg马上换回a1.jpg 

解决方案 »

  1.   

    <!DOCTYP>
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script>
    <style>  
     html, body{height: 100%}
    </style>  
    </head>
    <body>
    <div>
    <img src="a1.png" id="a" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)"  onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
    <img src="b1.png" id="b" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)"  onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
    <img src="c1.png" id="c" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)"  onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
    </div>
    </body>  
    <script>
    function mouseOver(obj){
    var name = $(obj).attr("id");
      $("#"+name).attr("src", name+"2.png");
    }
    function mouseOut(obj){
    var name = $(obj).attr("id");
    $("#"+name).attr("src", name+"1.png");
    }
    function mouseclick(obj){
    var name = $(obj).attr("id");
    var borthers = $(obj).siblings();
    for(var i = 0; i < borthers.length; i++){
    var _other = borthers[i];
    var _otherName = $(_other).attr("id");
    $(_other).attr("src", _otherName+"1.png").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)");
    }
    $("#"+name).attr("src", name+"3.png").attr("onmouseover","").attr("onmouseout","");
    }
    </script>
    </html>
      

  2.   


    <!DOCTYP>
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script>
    <style>  
     html, body{height: 100%}
    </style>  
    </head>
    <body>
    <div>
    <img src="a1.png" id="a" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)"  onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
    <img src="b1.png" id="b" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)"  onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
    <img src="c1.png" id="c" style="width: 48px;height:48px;" onmouseout = "mouseOut(this)"  onmouseover="mouseOver(this)" onclick="mouseclick(this)"/>
    </div>
    </body>  
    <script>
    function mouseOver(obj){
    var name = $(obj).attr("id");
      $("#"+name).attr("src", name+"2.png");
    }
    function mouseOut(obj){
    var name = $(obj).attr("id");
    $("#"+name).attr("src", name+"1.png");
    }
    function mouseclick(obj){
    var name = $(obj).attr("id");
    var borthers = $(obj).siblings();
    for(var i = 0; i < borthers.length; i++){
    var _other = borthers[i];
    var _otherName = $(_other).attr("id");
    $(_other).attr("src", _otherName+"1.png").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)");
    }
    if($("#"+name).attr("onmouseout") == ""){
    $("#"+name).attr("src", name+"1.png").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)");
    }else{
    $("#"+name).attr("src", name+"3.png").attr("onmouseover","").attr("onmouseout","");
    }
    }
    </script>
    </html>
    修改一下  可以在原图上面连续点击
      

  3.   


    谢谢Ragin,现在还有一个小问题,再改下就完全跟我预想的一样。问题:当鼠标已经选中一个按钮的状态时,鼠标移动到其它按钮上时要有 mouseOver的效果,现在是没选中的时候有mouseOver效果,其中一个选中了就没了。
      

  4.   

    选中A图片以后   A图片还要有mouseover的效果   是这个意思吗
      

  5.   


    选中A图后,B,C,D....那些要有mouseover效果。现在测试,还发现一个问题,如果按钮不加链接,选中A后,再按B,A能回到初始状态,如果加了链接,按A完了再按B,都是选中状态,你可以加个<a href="#">看看效果。
      

  6.   


    选中A图后,B,C,D....那些要有mouseover效果。现在测试,还发现一个问题,如果按钮不加链接,选中A后,再按B,A能回到初始状态,如果加了链接,按A完了再按B,都是选中状态,你可以加个<a href="#">看看效果。发下代码,还有你用什么浏览器测的。  我这边IE11 10 9 8 , google , firefox测试是没问题的
      

  7.   


    <html>
      
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="include/JSdate/js/jquery.min.js"></script>
    <style>  
     html, body{height: 100%}
    </style>  
    </head>
    <body>
    <div>
    <a href="#"><img src="images/an_1_1.gif" name="an_1_" border="0" id="an_1_" onClick="mouseclick(this)"  onmouseover="mouseOver(this)" onmouseout = "mouseOut(this)"/></a>
    <a href="#"><img src="images/an_2_1.gif" name="an_2_" border="0" id="an_2_" onClick="mouseclick(this)"  onmouseover="mouseOver(this)"  onmouseout = "mouseOut(this)"/></a>
    <a href="#"><img src="images/an_3_1.gif" name="an_3_" border="0" id="an_3_" onClick="mouseclick(this)"  onmouseover="mouseOver(this)"  onmouseout = "mouseOut(this)"/></a>
    </div>
    </body>  
    <script>
    function mouseOver(obj){
        var name = $(obj).attr("id");
      $("#"+name).attr("src", "images/"+name+"2.gif");
    }
    function mouseOut(obj){
        var name = $(obj).attr("id");
        $("#"+name).attr("src", "images/"+name+"1.gif");
    }
    function mouseclick(obj){
        var name = $(obj).attr("id");
        var borthers = $(obj).siblings();
        for(var i = 0; i < borthers.length; i++){
            var _other = borthers[i];
            var _otherName = $(_other).attr("id");
            $(_other).attr("src","images/"+ _otherName+"1.gif").attr("onmouseover","mouseOver(this)").attr("onmouseout","mouseOut(this)");
        }
        $("#"+name).attr("src", "images/"+name+"3.gif").attr("onmouseover","").attr("onmouseout","");
    }
    </script></html>
    就是在你的代码上稍微修改了下图片名称和路径,然后加了个链接。
      

  8.   

    加<a>标签以后
    var borthers = $(obj).siblings(); //获取img标签的兄弟节点
    这句话就失效了  所以都是选中状态。你说的问题  我在ie7测出来了   这个能力不足 对不起了。
      

  9.   

    把3种状态的图片合成一张图 ,css设置为按钮的背景图片,通过事件来改变背景图片定位 
    个人觉得比上面用img的src来控制比较好,然后设置一个点击的class名的背景定位。当哪个按钮点击时,事件触发添加这个class其他按钮移除。