Images used are copyrighted and are used for demonstration only.
Download snapfit.js and include it into your webpages HEAD section.
<script type="text/javascript" src="snapfit.js"></script>
To add snapfit just set the event onload="snapfit.add(this);" to an div surrounded image.
<div><img onLoad="snapfit.add(this);" width="400" height="200" ...></div>
Mouse- and Keyboard-driven handling:
Click & DragDoubleClickDoubleClick & [alt]Key or Right Mouse ButtonDoubleClick & [shift]Key or Middle Mouse ButtonKeyboard-driven handling: (if focused through mouse over image)
Press [escape]Press [delete] or [backspace]Press [return] or [enter]snapfit.defaultMixed = false; //BOOLEAN mix pieces at startupsnapfit.defaultSimple = false; //BOOLEAN mix the positions onlysnapfit.defaultNokeys = false; //BOOLEAN no keyboard controlsnapfit.defaultPolygon = false; //BOOLEAN polygons instead of rectanglessnapfit.defaultLevel = 3; //INT 0-6 (0==simple and 6==difficult)snapfit.defaultSpace = 0; //INT 0-50 (%) inner frame spacesnapfit.defaultSnap = 8; //INT 0-24 (px) snap radiussnapfit.defaultMatchcolor = '#00d000'; //STR '#000000'-'#ffffff'snapfit.defaultFalsecolor = '#ff0000'; //STR '#000000'-'#ffffff'snapfit.defaultAreacolor = '#e0e0e0'; //STR '#000000'-'#ffffff'snapfit.defaultBgrndcolor = '#000000'; //STR '#000000'-'#ffffff'snapfit.defaultAreaimage = false; //BOOLEAN image as backgroundsnapfit.defaultAreaborder = false; //BOOLEAN background bordersnapfit.defaultBorderwide = 2; //INT/FLOAT 1.0-6.0 (px) pieces border widthsnapfit.defaultAreaopacity = 0.33; //FLOAT 0.0-1.0 background area/image opacitysnapfit.defaultBorderopacity= 0.5; //FLOAT 0.0-1.0 pieces border/backside opacitysnapfit.defaultShadowopacity= 0.75; //FLOAT 0.0-1.0 active piece shadow opacitysnapfit.add(image[, options]);image == <img> elementoptions e.g. {level: 2, bwide: 3, ...}level == INT 0 - 6 Default: 3space == INT 0 - 50 Default: 0snap == INT 1 - 24 Default: 8mixed == BOOLEAN true or false Default: falsesimple == BOOLEAN true or false Default: falsenokeys == BOOLEAN true or false Default: falsepolygon == BOOLEAN true or false Default: falsemcolor == STRING '#000000' to '#ffffff' Default: '#00d000'fcolor == STRING '#000000' to '#ffffff' Default: '#ff0000'acolor == STRING '#000000' to '#ffffff' Default: '#e0e0e0'bcolor == STRING '#000000' to '#ffffff' Default: '#000000'aimage == BOOLEAN true or false Default: falseaborder == BOOLEAN true or false Default: falseaopacity == FLOAT 0.0 - 1.0 Default: 0.33bopacity == FLOAT 0.0 - 1.0 Default: 0.50sopacity == FLOAT 0.0 - 1.0 Default: 0.75bwide == FLOAT 1.0 - 6.0 Default: 2.0
FLOAT = snapfit.version;STRING = snapfit.released;
snapfit.reset(image [, value]);value == level 0-6 (0==simple, 6==difficult, default==3)snapfit.admix(image [, value]);value == simple true or false (Mix positions only if true)snapfit.solve(image); (animated)snapfit.remove(image);
<img onLoad="snapfit.add(this);" ...>snapfit.add(document.getElementById('img'));if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}snapfit.add($('img'));snapfit.add($('img'), {level:6, bwide:1});<button type="button" onclick="snapfit.admix($('img'));"> Admix </button><button type="button" onclick="snapfit.solve($('img'));"> Solve </button>alert('snapfit: '+snapfit.version+' ('+snapfit.released+')');snapfit.reset($('img'),1);snapfit.admix($('img'),true);snapfit.solve($('img'));snapfit.remove($('img'));In older browsers, the script degrades and your visitors won't notice a thing.
Please read the License before you download snapfit.js 1.01
Please read the Frequently Asked Questions before you contact the author.
Internet Explorer implementation in VML do not support all features and is unable to provide sub pixel precision. So don't expect to much. Image dimensions should always respect the original Aspect Ratio.
The speed depends on picture dimension and number of puzzle pieces. Opera 9.x and Firefox 1.5 are to slow to be practicable.
Version 1.01
Please leave any comments at this contact formular.
snapfit.js is distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license).
This license equals neither "open source" nor "public domain".
There are also Commercial Software Licenses available.
home 
developer 
laboratory 
transm.js
gauge.js
tripleb.js
mapper.js
curl.js
bevel.js
filmed.js
edge.js
corner.js
slided.js
glossy.js
reflex.js
instant.js
sphere.js
shiftzoom.js
loupe.js
busy.js
