最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Using jquery to change image sprite? - Stack Overflow

programmeradmin6浏览0评论

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",
        });
    });
});

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",
        });
    });
});
Share Improve this question edited Jul 11, 2011 at 7:45 Derek asked Jul 11, 2011 at 7:38 DerekDerek 12.4k31 gold badges106 silver badges166 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

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(" ");

try to use css method of jQuery like this:

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

i think that it will be better to separate property "background" to "background-image" and "background-position"

发布评论

评论列表(0)

  1. 暂无评论