ricordavo di averne fatto uno simile circa 7 anni fa e spulciando l'ho ritrovato e lo posto tale e quale (come reperto archeologico di javascript 
).
Ho preso un'immagine e l'ho scomposta in 36 rettangoli (1.jpg, 2.jpg... 36.jpg)
poi ho caricato i vari rettangoli in modo sparso sulle celle. Al primo clic su una foto si fa la selezione, al secondo le due immagini si spostano.
Il codice è obsoleto ma penso sia possibile ammodernarlo un pò per i browser più recenti con qualche accorgimento... il javascript comunque è davvero elementare
codice:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#33bbbb" 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("Mi spiace, ma per giocare devi avere\nInternet Explorer 4 o successivo.")
}
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>
<CENTER>
<font size=1 color="#ffffff" face="Verdana, Arial">
Riordina la mia foto. Basta cliccare su uno dei tasselli e scambiarlo di posto con un altro.
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="1">
<TR>
<TD>[img]13.jpg[/img]</TD>
<TD>[img]5.jpg[/img]</TD>
<TD>[img]17.jpg[/img]</TD>
<TD>[img]33.jpg[/img]</TD>
<TD>[img]29.jpg[/img]</TD>
<TD>[img]22.jpg[/img]</TD>
</TR>
<TR>
<TD>[img]26.jpg[/img]</TD>
<TD>[img]8.jpg[/img]</TD>
<TD>[img]11.jpg[/img]</TD>
<TD>[img]2.jpg[/img]</TD>
<TD>[img]35.jpg[/img]</TD>
<TD>[img]32.jpg[/img]</TD>
</TR>
<TR>
<TD>[img]24.jpg[/img]</TD>
<TD>[img]1.jpg[/img]</TD>
<TD>[img]19.jpg[/img]</TD>
<TD>[img]10.jpg[/img]</TD>
<TD>[img]30.jpg[/img]</TD>
<TD>[img]14.jpg[/img]</TD>
</TR>
<TR>
<TD>[img]23.jpg[/img]</TD>
<TD>[img]36.jpg[/img]</TD>
<TD>[img]15.jpg[/img]</TD>
<TD>[img]27.jpg[/img]</TD>
<TD>[img]20.jpg[/img]</TD>
<TD>[img]4.jpg[/img]</TD>
</TR>
<TR>
<TD>[img]18.jpg[/img]</TD>
<TD>[img]9.jpg[/img]</TD>
<TD>[img]31.jpg[/img]</TD>
<TD>[img]16.jpg[/img]</TD>
<TD>[img]7.jpg[/img]</TD>
<TD>[img]3.jpg[/img]</TD>
</TR>
<TR>
<TD>[img]34.jpg[/img]</TD>
<TD>[img]28.jpg[/img]</TD>
<TD>[img]6.jpg[/img]</TD>
<TD>[img]12.jpg[/img]</TD>
<TD>[img]25.jpg[/img]</TD>
<TD>[img]21.jpg[/img]</TD>
</TR>
</TABLE>
</CENTER>
</body>
</html>
Ciao
Rispondi quotando
