title: Programmatically Clip/Cut image using Javascript
body: <p>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 animation, stacked end-on-end so that it's really wide.  What could I do with Javascript to only display 1 arbitrary frame of animation at a time?</p>
  
  <p>I've looked into this "CSS Spriting" technique but I don't think I can use that here.  The source image is produced dynamically from the server; I won't know the total length, or the size of each frame, until it comes back from the server.  I'm hoping that I can do something like:</p>
  
  <pre><code>var image = getElementByID('some-id');
  
  image.src = pathToReallyLongImage;
  
  // Any way to do this?!
  image.width = cellWidth;
  image.offset = cellWidth * imageNumber;
  </code></pre>