What follows are instructions on how to make your own puzzle from a picture. To see what I am talking about check out my Puzzles page for a couple of examples.
To begin, gather up the following:
Okay, once you have all your tools together, let's get started. Create a folder for your puzzle. Since for purposes of this demonstration, I've chosen a picture of the Matterhorn, I called the folder 'Zermatt' (that's the name of the village just below the Matterhorn, in case you were wondering). All the files for the puzzle will go in here. You can save this folder on your Desktop temporarily or save it in its final destination folder, whatever is easier for you.
The puzzle script in the .htm file is based on a picture size of 400 x 300, so crop or resize your picture to that size and save it as a .jpg in your folder. Next, make a smaller copy of your picture using the same size proportions. Something like 200 x 150 or 160 x 120 will work. This will be your thumbnail - like the one on the right. Again, save as a .jpg and name it something original like thumbnail.jpg.
Using your image-splitting program, open up your picture. You want to divide the image into 48 equal size squares, eight across, six down, each square 50 x 50. In SplitImage you select File | New, navigate to your 400 x 300 image (Zermatt.jpg). Click Open. Then choose Edit | Edit Using Dialog menu (or click on the funny E on the toolbar). Select the Processor tab and change the selections as the picture below depicts.
Click Okay.
Here's what it looks like in SplitImage:
Under the File menu, click on Generate Image. It will ask for a file name. I chose image (you'll see why later). Be sure you save it to your working folder and click Save. You can now close SplitImage. No need to save 'Untitled' upon closing the program. In your puzzle folder you should now have 48 images from the original picture, each numbered 0-47. (In SplitImage's File | Preferences menu, you can change the file numbering choices, save image type and compression values if you so desire).
We now need to generate the .htm file. Here's the template I use. I don't know who wrote the script but if anyone knows who did, I will be happy to give him or her credit for it. Copy the text in the table below and paste it into a new file in your text editor (be sure you paste it as text and not as html). Save the file as an .htm file, not as a .txt file, again putting it in your working puzzle folder. Remember, everything should be saved in that one folder - just makes things much easier. Ironically, the one thing you don't need to save after you are done is the 400 x 300 image. It's not needed.
<html>
<head>
<title>A Picture Jigsaw Puzzle - Can you put this picture back together?</title>
<style type="text/css">
<!--
body {
background: #edecda;
margin: 20px;
padding: 20px;
}
table {
border: 10px ridge #999999;
float: left;
margin: 15px;
}
-->
</style>
</head>
<body onload="checkit()">
<script language=JavaScript>
<!--
var temp = new Image()
var loc
var gotit
function checkit()
{
if ((navigator.appName=="Microsoft Internet Explorer")
&& (parseInt(navigator.appVersion) >= 4))
return
else
alert("To play, you need MSIE 4 or greater")
}
function exch()
{
if ((event.button == 1) && (event.srcElement.className == "drag"))
{
if (gotit == 1)
{
gotit = 0
document.images[loc].src = document.images[event.srcElement.name].src
document.images[event.srcElement.name].src = temp.src
}
else
{
gotit = 1
loc = event.srcElement.name
temp.src = document.images[loc].src
}
}
}
document.onmousedown=exch
// -->
</script>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt class="drag" name="pic13" src="image13.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic02" src="image2.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic16" src="image16.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic19" src="image19.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic06" src="image6.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic27" src="image27.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic30" src="image30.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic42" src="image42.jpg"
width="50" height="50"></td>
</tr>
<tr>
<td><img alt class="drag" name="pic28" src="image28.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic35" src="image35.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic03" src="image3.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic39" src="image39.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic17" src="image17.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic43" src="image43.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic20" src="image20.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic14" src="image14.jpg"
width="50" height="50"></td>
</tr>
<tr>
<td><img alt class="drag" name="pic11" src="image11.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic04" src="image4.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic25" src="image25.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic29" src="image29.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic18" src="image18.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic08" src="image8.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic36" src="image36.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic44" src="image44.jpg"
width="50" height="50"></td>
</tr>
<tr>
<td><img alt class="drag" name="pic37" src="image37.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic15" src="image15.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic01" src="image1.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic05" src="image5.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic31" src="image31.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic41" src="image41.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic23" src="image23.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic45" src="image45.jpg"
width="50" height="50"></td>
</tr>
<tr>
<td><img alt class="drag" name="pic34" src="image34.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic22" src="image22.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic38" src="image38.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic09" src="image9.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic40" src="image40.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic10" src="image10.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic32" src="image32.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic46" src="image46.jpg"
width="50" height="50"></td>
</tr>
<tr>
<td><img alt class="drag" name="pic33" src="image33.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic26" src="image26.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic24" src="image24.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic00" src="image0.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic12" src="image12.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic21" src="image21.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic47" src="image47.jpg"
width="50" height="50"></td>
<td><img alt class="drag" name="pic07" src="image7.jpg"
width="50" height="50"></td>
</tr>
</table>
</div>
<div align="center">
<h1>The Matterhorn</h1>
<p><img src="thumbnail.jpg" width="150" height="112"></p>
<p>Zermatt, Switzerland</p>
</div>
<!--This is the ticker, replace "REPLACE" with what you want to appear on the ticker-->
<script language=JavaScript>
<!--
ScrollSpeed = 250; // milliseconds between scrolls
ScrollChars = 4; // chars scrolled per time period
function SetupTicker() {
// add space to the left of the message
msg = "REPLACE";
RunTicker();}
function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end -->
</script>
</body>
</html>
You need to make a few changes to the .htm file.... Be sure it's opened in your text editor. The text in the script above in red needs to be changed as appropriate for your particular picture. The text in blue must be replaced by the file name you generated with the image splitting program. A text editor with a find & replace function will save you lots of time. Just replace "image" with the name of your own file. Of course, if you had been thinking ahead you could have used the file name of "image" to begin with and then you wouldn't have to replace them all. But it just takes a minute and I think it's a good idea to have different names for each file if you plan on making more than one puzzle.
You may also want to change the message in the ticker near the bottom of the file your own. It's highlighted in green.
That's really about it. If you want to use this as stationery, just move the folder to your stationery folder and send it using your email program (I'm talking Outlook Express here). You can also post it on your web site. And you can send it to someone as an attachment. Just (double) click on the .htm file which opens it up in Internet Explorer. Click on File | Save As, give it a name and be sure to save it as an *.mht file (by saving it with the .mht extension rather that .htm, it will be a single file rather than several). Then you can send it to anyone as an attachment. As long as they have Internet Explorer, they should be able to open it and reassemble the puzzle.
There is nothing stopping you from changing the dimensions of the pictures used for the puzzle. If you want to make it larger or smaller, go right ahead. Just change the image dimensions in the script. As long as you can divide it into equal size squares, it should work; you'll have to do the math yourself. You can also change and move around the names of each individual image slice to different table cells, so that there will be a different solution to the puzzle.
If you have any suggestions, criticisms or just get plain confused with any of the steps, let me know and I will try and help. Have fun!