Cutting an Image into pieces through Javascript

Question

I am creating a simple Jigsaw puzzle. In order to do this, I need to cut the picture I am using into 20 pieces. Is there a way in Javascript to cut a picture into 20 equal p

Answer 1

You can do this by setting the image as a background on a div, then setting its background-position. This is basically the same as using CSS Sprites.

(assume pieces are 100 x 100px)

CSS:

.puzzle {
   background-image:url(/images/puzzle.jpg);
   width:100px;
   height:100px;
}

.piece1 {
   background-position:0 0
}

.piece2 {
   background-position:-100px -100px
}