image替换button，怎么给image添加鼠标滑过与点击样式！鼠标滑过替换图片，鼠标点击在替换令一张。

如题：我有三张图片，启动后先是图片1，鼠标悬停显示图片2，鼠标点击显示图片3，点击后执行1。求相关的帖子，博客，最好能有个小例子不胜感激！

解决方案 »

  1.   

    /*CSS:*/
    button{background:url(图片1)}
    button:hover{background:url(悬停图片)}
    button:active{.....}/*不知道这个行没??*/
      

  2.   


    假设现在有三个图片分别名字为 img1 src="img1.gif" img2 src="img2.gif" img3 src="img3.gif" $(function(){
        $("img").mouseover(function(){
         $(this).attr("src","img2.gif")
     }) ;
         $("img").click(function(){
         $(this).attr("src","img3.gif")
     }) ;
         $("img").mouserout(function(){
         $(this).attr("src","img1.gif")
     }) ;
    }) ;
    <img src="img1.gif" />
      

  3.   

    我给你写了一个
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javascript">
    <!-- function tupian1(a){
    a.src = "http://img.my.csdn.net/uploads/201211/23/1353647562_2279.JPG"
    }
    function tupian2(a){
    a.src = "http://img.my.csdn.net/uploads/201211/23/1353647578_8877.JPG"
    } function tupian3(a){
    a.src = "http://img.my.csdn.net/uploads/201211/23/1353647562_6350.JPG"
    }
    //-->
    </script>
    </head><body>
    <div>
    <p><b>供选图片：</b></p>
    <table border="1" cellspacing="0">
    <tr>
    <td><img src="http://img.my.csdn.net/uploads/201211/23/1353647562_2279.JPG" /></td>
    <td><img src="http://img.my.csdn.net/uploads/201211/23/1353647578_8877.JPG" /></td>
    <td><img src="http://img.my.csdn.net/uploads/201211/23/1353647562_6350.JPG" /></td>
    </tr>
    </table>
    </div>
    <br /><br /><br /><br />
    <div>
    <p><b>运行效果如下（<font color="red">请操作下图</font>）：</b></p>
    <table border="1" cellspacing="0">
    <tr>
    <td><img src="http://img.my.csdn.net/uploads/201211/23/1353647562_2279.JPG" 
             onmouseenter ="tupian2(this)"
     onmousedown="tupian3(this)"
     onmouseup="tupian1(this)"/></td>
    </tr>
    </table>
    </div></body>
    </html>运行效果截图如下：