DHTML Puzzle

Turns almost any picture into a JavaScript pupuzzlezzle.

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com

Instructions:

1: Copy and paste the following script in the HEAD section of your page:
Select all...

var picname="logo.gif";            // NAME OF PICTURE USED.
var piccolor="black";              // BACKGROUND COLOR OF "EMPTY" SPOT
var picwidth=500;                    // THE PICTURE WILL BE SCALED TO FIT THIS WIDTH.
var picheight=120;                  // THE PICTURE WILL BE SCALED TO FIT THIS HEIGHT. THESE NUMBERS *MUST*  BE DIVISIBLE BY 5.

//*************DO NOT EDIT BEYOND THIS POINT*************\\
if(picwidth%5!=0 || picheight%5!=0 ){
picheight=Math.round(picheight/5)*5;
picwidth=Math.round(picwidth/5)*5;
}
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var choices=[null, [6,2] , [1,3,7] , [2,8,4] , [3,5,9] , [4,10] , [1,7,11] , [2,6,8,12] , [3,7,9,13] , [4,8,10,14] , [5,9,15] , [6,12,16] , [7,11,13,17] , [8,12,14,18] , [9,13,15,19] , [10,14,20] , [11,17,21] , [12,16,18,22] , [13,17,19,23] , [14,18,20,24] , [15,19,25] , [16,22] , [21,17,23] , [22,18,24] , [23,19,25] , [24,20]];
var grid=[null,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];
var blockw=Math.floor(picwidth/5);
var blockh=Math.floor(picheight/5);
var txt='', ctr=0, rc, IDs=new Array(), empty=new Object();
var imgclipsX=new Array();
var imgclipsY=new Array();
for(i=0;i<5;i++){
imgclipsX[i]=new Array(); imgclipsY[i]=new Array();
imgclipsX[i][0]=blockw*i; imgclipsX[i][1]=blockw*(i+1);
imgclipsY[i][0]=blockh*i; imgclipsY[i][1]=blockh*(i+1);
}
txt+=(ns4)? '<table cellpadding=0 cellspacing=0 border=0 bgcolor="'+piccolor+'" width="'+picwidth+'" height="'+picheight+'"><tr><td nowrap><ilayer name="cont" width="'+picwidth+'" height="'+picheight+'" bgcolor="'+piccolor+'">' : '<div style="position:relative; width:'+picwidth+'px; height:'+picheight+'px; background-color:'+piccolor+';">';
for(r=5;r>=1;r--){
for(c=5;c>=1;c--){
if( !(r==5&&c==5)){
rc=(5*r)+c-5;
txt+=(ns4)? '<layer name="l'+rc+'" width="'+blockw+'" height="'+blockh+'" top="0" left="0" clip="'+imgclipsX[c-1][0]+' , '+imgclipsY[r-1][0]+', '+imgclipsX[c-1][1]+' , '+imgclipsY[r-1][1]+'" z-index="0">' : '<div id="l'+rc+'" style="position:absolute; top:0px; left:0px; width:'+blockw+'px; height:'+blockh+'px; clip:rect('+imgclipsY[r-1][0]+' '+imgclipsX[c-1][1]+' '+imgclipsY[r-1][1]+' '+imgclipsX[c-1][0]+'); z-index:'+(rc)+';">';
txt+='<img src="'+picname+'" border="0" height="'+picheight+'" width="'+picwidth+'">';
txt+=(ns4)? '</layer>' : '</div>';
txt+=(ns4)? '<layer name="d'+rc+'" width="'+blockw+'" height="'+blockh+'" top="'+imgclipsY[r-1][0]+'" left="'+imgclipsX[c-1][0]+'"  z-index="'+(rc+600)+'" onmouseover="status=\'Tile: '+rc+'\'; return true" onmouseout="status=defaultStatus"></layer>' : '<div id="d'+rc+'" style="position:absolute; top:'+imgclipsY[r-1][0]+'px; left:'+imgclipsX[c-1][0]+'px; width:'+blockw+'px; height:'+blockh+'px; z-index:'+(rc+600)+'" onmouseover="status=\'Tile: '+rc+'\'; return true" onclick="movetile('+rc+')"><table width="'+blockw+'" height="'+blockh+'" cellpadding="0" cellspacing="0" border="0"><tr><td> </td></tr></table></div>';
}}}
txt+=(ns4)? '</ilayer></td></tr></table>' : '</div>';
txt+='<br><br><form><input type="button" value="Shuffle" onclick="ctr=0; autoshuffle()"></form>';
document.write(txt);

function getid(id){
if(ns4) return document.cont.document.layers[id];
else if(ie4) return document.all[id];
else return document.getElementById(id);
}

function getleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function gettop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function findwhich(num){
for(var j=1;j<25;j++)if(IDs[j].cellnum==num) break;
return j;
}

function autoshuffle(){
ctr++;
movetile(grid[choices[empty.cellnum][Math.floor(Math.random()*choices[empty.cellnum].length)]]);
if(ctr<30)setTimeout('autoshuffle()' ,110);
}

window.onload=function(){
for(r=5;r>=1;r--){
for(c=5;c>=1;c--)if( !(r==5&&c==5))IDs[(5*r)+c-5]=new tile( r,c );
}
empty.xeff=imgclipsX[4][0];
empty.yeff=imgclipsY[4][0];
empty.choices=choices[25];
empty.cellnum=25;
}

window.onresize=function(){
  if(ns4)setTimeout('history.go(0)',400);
}

</script>

2: Adjust the settings near the top of the script. Enter the picture filename, the background color, and then the width and height of each puzzle piece.
The height and width you specify must be divisible by 5 (ie: any number ending with a 0 or 5). If not, the script will choose the sizes closet to what you want.

Now, the script will "puzzle-ize" your image!

Note: Scrollbars may appear/disappear as the puzzle pieces are moved/shuffled. This is normal.