如何用CSS或Javascript实现：点击一张图片，该图片换为另一张图片？

如何用CSS或Javascript实现当拨号盘关闭时，左下角的图标变为向下的按钮，像这样的-

现在点击后任然是这样。

感谢！

采用tiscript实现如下：

var updowm_flag=1;
  function updown_down()
    {
      if(updowm_flag)
      {
        $(#up_down).style#background = "url(image/down.png) no-repeat";       
        updowm_flag=0;
      }
      else
      {
        $(#up_down).style#background = "url(image/up.png) no-repeat";
        updowm_flag=1;
       }
   }
$(#up_down).onClick = function()
  {
    updown_down();
  }

<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    .box{
        width:100px;
        height:100px;
        border:1px solid red;
        position: relative;
        overflow: hidden;
    }
    .A,.B{
        position: absolute;
        z-index: 1;
    }
        
    input{
        display: block;
        width: 100px;
        height: 100px;
        opacity:50;
        position: absolute;
        z-index: 10;
        opacity:0;
    }
    .i_2{
        display: none;
    }
    /*点击i_1 让A图片隐藏，显示B图片*/
    .i_1:checked ~.box .A{
        display: none;
    }
    /*点击i_1让i_2按钮出现（看不见）*/
    .i_1:checked +.i_2{
        display: block;
    }
    /*点击.i_2 让A显示*/
    .i_2:checked ~.box .A{
        display: block;
    }

    /*同时让.i_2隐藏，便于后面再次点击i_1*/
    .i_2:checked{
        display: none;
    }
</style>

</head>
<body>

<input type="radio" name='v' class="i_1" />
<input type="radio" name='v' class="i_2" />
<div class="box" id="box">
    <img class="B" src="B.jpg" />
    <img class="A" src="A.jpg" />
    
</div>

</body>
</html>

经过测试是成功的利用的是input元素的：checked，纯css实现，不过有点麻烦，用js简单些

纯使用css实现这样的效果，可以借助某些dom上的特定属性

可以看下http://callmenick.com/post/css-toggle-switch-examples 使用checkbox实现的switch效果

【热门文章】