~*~ Puzzle~*~
(Version française ICI)
 

Break out of this frame.
 


With a little gift if you solve it!

Graphics created using artwork by Trina Clark

You can do pretty much what you like with your result. Give credit where credit is due.

 
This pointing hand is here to help you. You can drag and drop it and use it as a marker to help with following the tutorial.
Martine  

Download the applet: . Download the code .
The author is Virtual Max whose site is no longer online. And unzip both in a folder - mine I named puzzle.


STEP 1

Create your image. It can be as small or as big as you want, and the shape you prefer: either a square or a rectangle. Save as a .jpg or gif.

STEP 2

Open a new html webpage and save as index.html.

Then create a table on this index.html page.

<table bgColor="#000000"  border="6" borderColorDark="#B72829" borderColorLight="#C95E5E" cellpadding="0" cellspacing="0"  width="100%">
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
</table>

Change the colour of the background --> bgColor="#000000", the width of the border --> border="6", the colour of the dark border --> borderColorDark="#E4D8C4" and that of the light border --> borderColorLight="#b59660".
Adjust the width of your table. Here it's at 100%.

On the left add your image where you see the empty cspce/cell (&nbsp;) and on the right, add the applet code where you see the empty space/ cell (&nbsp;).

STEP 3 - The Applet code  to add on your index page. Let's look at it.

<APPLET CODE="puzzlemaker.class" WIDTH=211 HEIGHT=214>
<PARAM NAME="AUTHOR" VALUE="Virtual_Max (http://come.to/vmax)">
<PARAM NAME="IMAGE" VALUE="TrainPuzzle_mf10.gif">
<PARAM NAME="KEY" VALUE="Free Version">
<PARAM NAME="ROWS" VALUE="6">
<PARAM NAME="COLS" VALUE="8">
<PARAM NAME="BGCOLOR" VALUE="000080">
<PARAM NAME="TEXTCOLOR" VALUE="00ff00">
<PARAM NAME="TARGET" VALUE="_blank">
<PARAM NAME="LINK" VALUE="gift.html">
</APPLET>

NOM:

Description:
CODE Reference to the applet. And the WIDTH and HEIGHT of your image.
AUTHOR Virtual_Max (http://come.to/vmax)" Obligatory Parameter. Do not remove.
IMAGE URL of your image.
KEY Encrypted key for this applet. For free use one can use the "Free Version" with a link back to VMax's pages.
ROWS Number of rows. You choose! The higher the number, the more puzzle pieces.
COLS Number of columns. You choose! The higher the number, the more puzzle pieces.
BGCOLOR Colour for the background and for the text. In hexadecimal format with no #. VALUE="513D6E". Optional parameters.
TEXTCOLOR
LINK URL of the page that will open once the puzzle has been completed. An option. This page that opens I have named gift.html
TARGET Target window to open an HTML document. Optional. One can use any of the following: 
  • "_top"
  • "_self"
  • "_blank"
  • "_parent"
  • or the name of the window.
    		•

    STEP     4

    I put everthing in the puzzle folder:

    • the puzzlemaker.class file(which you found in the zipped folder)
    • my image saved as a .gif
    • my index.html page with the Applet code
    • my second page with the gift: gift.html. This is optional.
    Another result with an image with a different shape and size and a different number of rows and columns.

     
    Tubes PMD

    Martine
    9 November 2010

    If you have any questions, don't hesitate to contact me