Programmatically Clip/Cut image using Javascript -

Are there any documents / tutorials about how a large image is used for clip or cut so that the user can only A small part of the image seen? Let's assume that the image of the source is 10 frames of animation, stacked end-end-end is so much that it is really broad, what can I do with javascript to display 1 arbitrary frame of animation at a time?

I have looked at this "CSS spriting" technique but I do not think I can use it. The source image is dynamically produced from the server; I do not know the full length, or the size of each frame, unless it comes back from the server I hope I can do something like this:

  var image = getElementByID ('some - id '); Image.src = Path indeed; Longmiz; // Any way to do this?! Image.width = cellWidth; Image.offset = cellWidth * imageNumber;  

This can be done by appending your image in the "viewport" div. Set the width and height on the div (according to your requirements), then set the position: relative and overflow: hidden to it. Just place your image inside it and change the position to change the parts that are displayed. To display 30x40 fragments of an image starting with

(10,20):

  & lt; Style type = "text / css" & gt; Div.viewport {Overflow: Hidden; Status: Relative; } Img.clipped {display: block; Status: Completed; } & Lt; / Style & gt; & Lt; Script type = "text / javascript" & gt; Function set viewport (IMG, X, Y, width, height) {img.style.left = "-" + x + "px"; Img.style.top = "-" + y + "px"; If (width! == undefined) {img.parentNode.style.width = width + "px"; Img.parentNode.style.height = height + "px"; }} SetViewport (document.getElementsByTagName ("img") [0], 10, 20, 30, 40); & Lt; / Script & gt; & Lt; Div class = "viewport" & gt; & Lt; Img class = "clip" src = "/ images / clipped.png" alt = "clipped image" /> & Lt; / Div & gt;  

Normal CSS properties are associated with classes so you can have multiple viewport / clipped images on your page. It can be asked to change the setViewport (...) function at any time to see what parts of the image are displayed.