Question

I have the following code that allows for a user to hover over an image and it will display a new image (well, a new section of a sprite image). I want it to display a third image on click. 1. Am i doing this the most efficient way? 2. How do I code for an on-click image to show up?

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

You need JavaScript to solve this.

<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>