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
2 Answers
Reset to default 4IMO 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"