How to split the image using Javascript + CSS?

Question

I have the image like this:

I want to split it into six squares, and I can keep looping to display the animation. Do you have any ideas to split the image by JS + CSS instead of using 6 separate image files.

Answer 1

Set it as a background image and manipule the background position.

Update: As seth mentioned, the technique is called CSS Sprites. Searching google for animation with css sprites turns up some good results.

Answer 2

Here's an article from SitePoint on sprite animation using jQuery.