CODEWITHSUNDEEP
javascriptjquerycsshtml
user2152572
user2152572

Reputation: 47

change icon on html page upon user action using css or javascript

I am quite a newbie web development having basic knowledge in HTML CSS and JavaScript. I have a small blog page, which allows users to upvote a title of a blogpost - similar to what SoF has on its questions.

So, the problem I am facing is that I am unsure how I should change the icon (which I have in a sprite) once the user has clicked on it. So, in a nut shell

(Page1) icon1.png --> User Clicks --> (Page1) icon2.png

where icon1.png and icon2.png are in my sprites.png

I think JS is the way to go for this - but I was wondering if it is (is doing some sort of AJAX the way to do it?)- any directions would be much appreciated.

Thanks.

Upvotes: 1

Views: 613

Answers (2)

Bhadra
Bhadra

Reputation: 2104

    $(function(){
    $('#SELECTOR').click(function(){
    $('#icon1').css('background-position','0px, 120px') //whtever bg position
     });
     })

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

You can use javascript as below.

On click set background image position.

document.getElementById('SELECTOR').style.backgroundPosition='0px 150px';

where SELECTOR is the element's ID on which you want to change image position

As per you said you have sprite image so you just need to set image position accordingly.

Upvotes: 0

Related Questions