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 pieces and save them as 20 different objects within the webpage? Or do I just have to go into photoshop and cut each picture out myself and call it in?

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)

<div class="puzzle piece1"></div>
<div class="puzzle piece2"></div>

CSS:

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

.piece1 {
   background-position:0 0
}

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