使用jquery的CSS Sprites

Question

I would like to control a css sprite with javascript/jquery. Based on a user input the image should move position.

The case: I have an image container with 400x400, but the image I want to show is 400x1200, so I can only display 400 in height at the time, but the width would be constant.

I would to like to display parts of the image when a user clicks a button. I have drawn an example to show what I want: http://0o2471.net/55070

In that mockup you have the image container which is 400x400 marked with black frame, the green background is the "image" that I want to display based on the user input. So let's say the user press the "Button bottom" then the bottom part would change its position to the center(image container.)

Any suggestions on how I do this? Which functions in jquery/javascript should I use? Is css sprites the best way? I don't need the whole code, just a few directions.

Answer 1

Use background-position CSS rule. JQuery code for this

$(element).css({'background-position' : '0 -100px'})