Animated Sprite Sheets blog - shindig

I was playing around with my sprite sheet generator yesterday and made a little sprite player for a webpage using jquery.

I make the sprite sheets with a single click as shown in this vid:

Then use Jquery to move the backgroundposition of the sprite like:

//CrusaderLeft
var framecrusaderL = 1;
 function crusaderLanim() {
	var bufferb = 256;
         var leftb = bufferb * framecrusaderL;
         // top stays 0 since all the images are have Y positioned at  0
         var topb = 0;
         $('#crusaderLeft').css('backgroundPosition','-'+leftb+'px -'+topb+'px');
        framecrusaderL++;
	if(framecrusaderL > 7) {
framecrusaderL = 1;
}
 };

In my stylesheet CSS file I declare the sprite's div ID:

    #crusaderLeft {

         /* our flame sprite png */
         position:absolute;
         top:500px;
         left:500px;
         background: url(http://pugetsoundtraining.com/Portfolio/images/CrusaderSwingLeft.png);
         width: 256px;
         height: 256px;
 } 

And in the html page I setinterval:

<script type="text/javascript">
setInterval('crusaderLanim()',100);
</script>

And Somewhere in the HTML I declare the div ID we declared in CSS:

And the webpage that plays it can be seen here: Pugetsoundtraining.com