点击图片变为另一种图片

<html>
<head>
    <title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script> 
<style>
</style>
</head>
<body>
<img src="imges/404.png" id="img"/>
</body>
<script>
$(function(){
$('#img').click(function(){
if($(this).attr('checked')){
$(this).attr({'src': 'imges/404.png', 'checked': false});
}else{
$(this).attr({'src': 'imges/405.png', 'checked': true});
}
});
});
</script>
</html>

解决方案 »

  1.   

    如果是用的css的background。那么设置两个不同的class, 直接更改css的class即可。
    例如：
    .normal{
      background :11111.jpg
    }.active{
      background : 2222.jpg
    }
    （实际中更多的是多张图拼在一张大图上，css spirit定位）
    点击的时候只需要切换不同的class即可。
      

  2.   

    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
      div{
        width:74px;
        height:74px;
        background:url(http://img.bbs.csdn.net/upload/201502/12/1423724129_595014.jpg) -35 -23px;
        margin:10px;
      }
      .aa{
        background:url(http://img.bbs.csdn.net/upload/201502/12/1423724152_641124.jpg) -28px -23px;
      }
    </style>
    <div></div>
    <div></div>
    <script>
      $('div').click(function(){$('div').removeClass('aa');$(this).addClass('aa')})
    </script>
      

  3.   

    通过增加class的属性就可以实现。同意楼上的观点！
      

  4.   

    回复：slwsss  代码在本地运行不了，点击没有反应。
      

  5.   

    回复：Ragin     如果多张图片的情况下，点击点击第二章时怎么把第一张还原为原来的图片。