如何在点击时更改链接的图片？

Question

我有以下代码，允许用户将鼠标悬停在图像上，它将显示一个新图像（好吧，精灵图像的新部分）。我希望它在点击时显示第三个图像。1.我这样做是最有效的方式吗？2.如何对点击后的图像进行编码以显示？

HTML:

<a href="<?php echo base_url('home/linkedin_login')?>" ><img style = "border-radius: 5px;" class="signin-all" src="assets/images/header/blank.png"></a>

CSS：

    [class^="signin-"] {
  display: inline-block;
  vertical-align: text-top;
  background-image: url('../images/signin_sprite.jpg');
  background-repeat: no-repeat;
  *margin-right: .3em;
}
[class^="signin-"]:last-child {
  *margin-left: 0;
}
.signin-all{
background-position: 0px 0px;
   width: 132px;
  height: 37px;
  position: absolute;
}
.signin-all:hover{
background-position: 0px -34px;
   width: 132px;
  height: 34px;
  position: absolute;
}

Answer 1

您需要JavaScript来解决此问题。

<a href="javascript:void(0)" onclick="changeImage()">
    <img style = "border-radius: 5px;" class="signin-all" src="assets/images/header/blank.png" id="image">
</a>
<script>
    function changeImage() {
        document.getElementById("image").src="newImageSource";
    }
</script>