Inside Technique : The Puzzler
By Scott Isaacs

Turn any image on the web into a sliding puzzle!

Using Dynamic HTML, The Puzzler can take any image on the web and turn it into a sliding puzzle. The sliding puzzle is created using only the original image. By carefully clipping and showing different portions of the image, we are able to create the puzzle pieces. This improves on our original sliding puzzle demonstration which required you to go through the painful process of manually turning dividing the image into each piece. Now, all you do is define what image to use and the number of rows and columns, and the puzzle is automatically created.

To make it easy to add sliding puzzles to your site, we created a simple wizard that generates a puzzle page for you. After running the wizard, we generate a page with all the code ready to be copied to your site.

You can now try out our rover puzzle or build your own puzzle

The Puzzler Requires Internet Explorer 4.0

Puzzle Definition

Image	http://scotti3/gifs/robot.gif (108 x 76)
Rows:	4	Columns:	4	Scale:	2

Browser Notes

The Puzzler only runs with Internet Explorer 4.0 or later. The Puzzler does not run in Netscape Navigator because Netscape does not support direct positioning of images. We use positioning on the images to create each puzzle piece. Each piece of the puzzle is the complete image carefully positioned and clipped to display only the area representing the piece.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.