Использование jquery для изменения спрайта изображения?

Question

Если я использую спрайт изображения, скажем, sprite.png, содержащий три иконки, как я могу использовать jquery для включения .click (), чтобы изменить положение фона по осям x и y, чтобы фон сменился другим значком и как я могу получить значения позиций x, y?

То есть, другими словами, если бы у меня было

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

Как я могу использовать jquery, чтобы превратить его в

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

и как я могу получить значения, используя jquery (-91px, 0px)?

Спасибо!

Н.В.М. Я понял:

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

Answer 1

IMO лучше разделить стиль фона на два свойства: background-image и background-position следующим образом:

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

Для установки новой позиции используйте метод css:

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

Для получения текущих значений используйте метод css без второго параметра:

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

Answer 2

попробуйте использовать метод jQuery css следующим образом:

$(this).css('background','url(img_navsprites.gif) -51px 0');
var valueOfCssproperty = $(this).css('background');

Я думаю, что будет лучше отделить свойство "background" от "background-image" и "background-position"