change image sprite on click for button using CSS

Question

change button image onclick then return to original image after click

<style>
img.button-send {
background: url(img/agentsprite.png) 0 0;
width:87px;
height:34px;
opacity:0;
}
img.button-send:active {
background: url(img/agentsprite.png) 34 174;
width:87px;
height:34px;
}

</style>
      <button type="submit">
      <img class="button-send" src="img/img_trans.gif" width="1" height="1" />
          </button>

i'm using a sprite for this, and it seems that it won't go to that image position when i click it, is there any way for this to work ? i wan't to have a button effect for this field when pressed.

Rohit Azad Malik · Accepted Answer · 2012-10-04 05:51:23Z

3

...........................

hi now used to px value in your background-position image

as like this

img.button-send:active {
background: url(img/agentsprite.png) 34px 174px;
}

or you can used this also

img.button-send:active {
    background-position:34px 174px;
    }

px value according to your design

answered Oct 4, 2012 at 5:51

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

telexper Over a year ago

oh so that's what i'm missing'

telexper Over a year ago

it works now gotta have to wait for 10mins before i can accept your ans

Collectives™ on Stack Overflow

change image sprite on click for button using CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related