html - 如何在点击时更改链接的图像？

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>