Making an image change once it is clicked

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.

Another tip is no need to define `height` and `width` twice. Your hover css state doesn't need them they are already applied from your first statement :) — kidwon, Dec 21 '12 at 12:38

Sven van Zoelen · Accepted Answer · 2012-12-21T12:35:55.627

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

edited Dec 21 '12 at 12:35

answered Dec 21 '12 at 12:20

Sven van Zoelen

6,989
5
37
48

Great thanks this works fine. However I also need to link it to the audio player. I can do this by including .stratus as a class in the audio link. How can I incorporate this into the above code? The audio link looks like this So I think I need to change the CSS so it refers to elements with both classes .play_pause .stratus {...} for example. How would i go about editing the JS to reflect this as well? – Luke Boobyer Dec 21 '12 at 14:49
@LukeBoobyer That sounds like a new question ;) I don't know how the soundcloud linking works or what you are using. – Sven van Zoelen Dec 21 '12 at 15:27
Ok thanks I just had to change some of the classes around to make it work with the .stratus class. – Luke Boobyer Dec 22 '12 at 12:40

kidwon · Answer 2 · 2012-12-21T12:24:16.157

0

That is simple where have you read?

jQuery('.testclass .stratus').click(function{
   jQuery(this).toggleClass('played');
})

css:

.played{
   background-position: -1px -29px;
}

edited Dec 21 '12 at 12:24

answered Dec 21 '12 at 12:13

kidwon

4,448
5
28
45

He said that he want it vice versa =) – Dávid Szabó Dec 21 '12 at 12:13
Essentially the image needs change everytime its clicked. Initially displaying image 1, once clicked image 2, click image 1, click image 2 etc... – Luke Boobyer Dec 21 '12 at 12:20
Yes, that's what happens here `played` class is your image2 bg position Look at @Sven post is the same manner just this one is a short syntax – kidwon Dec 21 '12 at 12:21
toggleClass() adds and removes the given class. – kidwon Dec 21 '12 at 12:34

score 0 · Answer 3 · edited May 23 '17 at 11:56

You will have to use JavaScript to accomplish the switching, there is no way to accomplish such logic with pure CSS.

The easiest way to go would be to have two classes play and pause. Through CSS you declare which part of the sprite you want to show for each of those classes. Then you attach a click-event listener to the element with JavaScript, and in the click-event callback you remove class play from the element and apply class pause instead, and vice versa.

MDN has a good article on how to attach event-listeners to an element. And this SO question discuss how you can add/remove classes on an element.

score 0 · Answer 4 · answered Dec 21 '12 at 12:16

If you only wanted to detect the first click, you could do this in pure CSS by giving the link an id and using the :target pseudoclass (e.g. a#theid:target {...})

But since you need to detect a second click, you'll need to use JS to toggle between CSS classes. The basic way is to use an event handler:

document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};

score 0 · Answer 5 · answered Dec 21 '12 at 12:28

Example using .querySelectorAll and .addEventListener, with your current sprite. No jQuery is used.

var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
    e.addEventListener('click', function () { // this fn generates the listener
        var pause = false; // captured in scope, not global
        return function () { // this is the actual listener
            this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
        }
    }(), false); // the () invokes the generator

Making an image change once it is clicked

5 Answers5

update