Issue
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?
Solution
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
}
Answered By - Diodeus - James MacFarlane
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.