Question

I’ve already spent hours looking at as many online resources and stackoverflow questions as I can find but for some reason I just can’t figure this out.

I’m attempting to use CSS and image sprites to make a link display as an image that changes once it is hovered over and once it has been clicked. I’ve played round with CSS and looked at JavaScript for far too long now and I just need some direction on how to get it working.

I’ve managed to make it change once its hovered over however what i really need to do is have the image change once it is clicked. So the begin with it displays the play button and when its clicked it displays a pause button, click it again and it displays the play button etc.

From what i can gather i will need to use JavaScript and an onclick event. However I’m not sure how this would work or how to use it with image sprites.

My CSS so far looks like this

.testclass .stratus {
background-position: -1px -1px;
width: 21px;
height: 21px;}.

.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height:
21px;}.

However this only effects the play button and when it is hovered over. Now i need a way to display the pause button when the play button is clicked and vice versa.

Image sprites URL.
http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png

URL of page im trying to get this to work on.
http://www.priceofmilk.co.uk/uncategorized/ddd-2

Can this be achieved using CSS and HTML or will I also need to use some JavaScript? Any assistance would be much appreciated.

Answer 1

I made a simple example. I use background colors and an anchor but you can easy implement this in your situation.

update

Updated the code so it uses your images.

HTML

<a class="play_pause">PLAY</a>​

CSS

.play_pause {
    display: block;
    width: 24px;
    height: 23px;
    text-indent: -99999px;
    background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png); 
    cursor: pointer;
}

.playing {
    background-position: -27px 0; 
}

.playing:hover {
    background-position: -27px -28px !important; 
}

.play_pause:hover {
    background-position: 0 -28px; 
}​

And the JS:

$(document).ready(function() {
    $(".play_pause").click(function() {
        $(this).toggleClass('playing');
    });
});​​

​

JsFiddle example