Programmatically Clip/Cut image using Javascript

Question

Are there any documents/tutorials on how to clip or cut a large image so that the user only sees a small portion of this image? Let\'s say the source image is 10 frames of

Answer 1

What spriting does is essentially position a absolutely-positioned DIV inside another DIV that has overflow:hidden. You can do the same, all you need to do is resize the outer DIV depending on the size of each frame of the larger image. You can do that in code easily.

You can just set the inner DIV's style:

left: (your x-position = 0 or a negative integer * frame width)px

Most JavaScript Frameworks make this quite easy.