qq_39782108
qq_39782108
采纳率50%
2017-09-23 04:44

如何点击Button切换图片

已采纳

我设置了三个Button按钮 点击Button1切换图片点击Button2切换图片同时Button1恢复原来图片 点击Button1切换图片Button2恢复原来图片

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • tenqnds ArsioLin 4年前

    如果是HTML页面的话,可以使用html标签+jquery脚本
    HTML标签中,可以给button加2个图的属性

    <button id="button1" data-defaultsrc="1的默认图片地址" data-clicksrc="1的点击后图片地址">Button 1</button>
    <button id="button2" data-defaultsrc="2的默认图片地址" data-clicksrc="2的点击后图片地址">Button 2</button>
    <script>
        $(function(){
            $("#button1").click(function(){
                $(this).css({"background":$(this).data("clicksrc")});
                $("#button2").css({"background-image":"url("+$("#button2").data("defaultsrc")+")"});
            });
            $("#button2").click(function(){
                $(this).css({"background":$(this).data("clicksrc")});
                $("#button1").css({"background-image":"url("+$("#button1").data("defaultsrc")+")"});
            });
    });
    </script>
    
    点赞 1 评论 复制链接分享
  • qq_36545099 无悔青春_j进无止境 4年前

    你看看这个能否帮到你

    点赞 1 评论 复制链接分享
  • qq_35898357 捞鬼然然 4年前

    或许只是Winform上两个按钮换换图片而已?

    点赞 评论 复制链接分享
  • q213546879 /*----无忧----*/ 4年前

    http://ask.csdn.net/questions/658877
    这里你提了差不多的问题,很多人回答你了,但是你并没有选出最佳答案,或许如果大家的回答不是你想要的东西的话,你可以试试把你的问题描述清楚

    点赞 评论 复制链接分享
  • q213546879 /*----无忧----*/ 4年前

    也许你不敢相信,但是这个效果确实只需要HTML 和 css 就能做到

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .button{
                border:none;
                width:227px;
                height:227px;
                background: #0a56bb;
                color: #fff;
                background: url("http://pic109.nipic.com/file/20160909/22566694_131726030715_2.jpg") no-repeat
            }
            .button:focus{
                outline: none;
            }
            .item1{
                background-position: -100px -222px;
            }
            .item1:focus{
                background-position: -100px -573px;
            }
            .item2{
                background-position: -380px -222px;
            }
            .item2:focus{
                background-position: -380px -573px;
            }
            .item3{
                background-position: -660px -222px;
            }
            .item3:focus{
                background-position: -660px -573px;
            }
        </style>
    </head>
    <body>
    
    <button class="button item1">第一个按钮</button>
    <button class="button item2">第二个按钮</button>
    <button class="button item3">第三个按钮</button>
    
    </body>
    </html>
    
    点赞 评论 复制链接分享

相关推荐