dynamic puzzle

Bei diesem Javascript von Peter Dematté könnt ihr ein Puzzle aus einem beliebigen Bild erstellen lassen.

Das Bild muss dabei auf eurem Webspace liegen, sich im gleichen Verzeichnis befinden wie das Script und puzzle.jpg heißen.

In der Variablen grid könnt ihr anpassen, wie groß das Raster sein soll (3 bis 10). Das Script zeigt übrigens nur einen quadratischen Ausschnitt eures Bildes, falls dieses nicht als Quadrat vorliegt.

Mehr Infos (auf englisch) gibts auf dematte.at/puzzle/.

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- /* Demo und Beschreibung auf http://dematte.at/puzzle/ Die Demo-Seite wird noch erneuert, aber für's Erste.. Viel Spaß! */ var grid = 5; document.write('<p id="puzzle"></p>'); (function puzzle(obj, image, script, grid, init, imageTime, scrumble, scrumbleInit, scrumbleAll) { var img = document.createElement('img'), scripts = document.getElementsByTagName('script'); if (!obj) if (!(obj = document.getElementById('puzzle'))) { if (!puzzle.counter) puzzle.counter = 0; puzzle.counter++; if (puzzle.counter > 100) return false; return setTimeout(function(){puzzle(obj, image, script, grid, init, imageTime, scrumble, scrumbleInit, scrumbleAll)}, 100); } if (!image) for(var n=0, m=scripts.length; n<m; n++) if (scripts[n].src.indexOf(script || 'puzzle.js') !== -1) image = scripts[n].src.substring(0,scripts[n].src.lastIndexOf("/")+1)+'puzzle.jpg'; grid = grid == undefined ? 3 : grid <= 10 ? grid : 10; if (init == undefined) init = 1; if (!imageTime) imageTime = [1800,700,1250,666,888,10420,453,2015,2183]; img.src = image; img.onload = (function() { var squareXY = Math.floor(img.height/grid), pixCount = Math.floor(img.width/img.height), pixCount = pixCount>9?9:pixCount, CSSText = [], HTMLText = [], DIVs, puzzle = document.createElement('div'), newCSS = document.createElement('style'); CSSText.push ('.puzzle{width:'+(grid*squareXY)+'px;height:'+(grid*squareXY)+'px}'); CSSText.push ('.puzzle div{width:'+squareXY+'px;height:'+squareXY+'px;float:left;background-image:url('+image+')}'); for (var n=0; n<grid; n++) { for (var m=0; m<grid; m++) { for (var k=0; k<pixCount; k++) CSSText.push ('.puzzle .c'+k+n+m+'{background-position:-'+(m*squareXY+(k*squareXY*grid)+k*img.height%squareXY)+'px -'+((n)*squareXY)+'px}'); HTMLText.push('<div class="c'+(scrumbleInit&&scrumbleAll?Math.floor(Math.random()*pixCount):init>pixCount-1?pixCount-1:init)+(scrumbleInit?Math.ceil(Math.random()*n):n)+(scrumbleInit?Math.ceil(Math.random()*m):m)+'"></div>'); } } puzzle.innerHTML = HTMLText.join(''); puzzle.className = 'puzzle'; obj.appendChild(puzzle); DIVs = obj.firstChild.getElementsByTagName('div'); newCSS.setAttribute('type','text/css'); if (!newCSS.styleSheet) newCSS.appendChild(document.createTextNode(CSSText.join(''))); document.getElementsByTagName('head')[0].appendChild(newCSS); if (newCSS.styleSheet) document.styleSheets[document.styleSheets.length-1].cssText = CSSText.join(''); // IE5.5 compatible dynPuzzle = function(pix) { // ... in the global scope to be recognicable for setInterval var d = Math.floor(Math.random()*grid*grid); DIVs[d].className = 'c'+pix+ (scrumble && scrumble[pix]?Math.floor(Math.random()*grid):Math.floor(d/grid))+ (scrumble && scrumble[pix]?Math.floor(Math.random()*grid):d%grid); }; for (n=0; n<pixCount; n++) if (imageTime[n] > 25) setInterval('dynPuzzle('+n+')',imageTime[n]); }); }(document.getElementById('puzzle_01'), 'puzzle.jpg', null, (grid - 1), 7, [800,700,250,1011,1600,900,1450], [1,1,1,1,1,1,1])); //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/experimentelles/dynamic-puzzle/" target="_blank">kostenlose-javascripts.de</a> <br /> <!-- präsentiert von kostenlose-javascripts.de -->