Question

If I’m using an image sprite with say a sprite.png containing three icons, how can I use jquery to on .click() to change the background x and y positions so that the background changes to another icon and how can I retrieve the values of the x, y positions?

So in other words if I had

background:url(img_navsprites.gif) -91px 0;

How can I use jquery to turn it into

background:url(img_navsprites.gif) -51px 0;

and how can I get the values, using jquery (-91px, 0px)?

Thanks!

nvm i got it:

$(document).ready(function(){
    $(".housing").click(function(){
        $(this).css({
            "background-position":"0 0",
        });
    });
});

Answer 1

IMO better to split background style into two properties: background-image and background-position like this:

background-image: url(img_navsprites.gif);
background-position: 91px 0;

To set new position use the css method:

$("selector").css("background-position", "-51px 0");

To get current values use the css method without the second parameter:

var position = $("selector").css("background-position").split(" ");