Ciao, volevo "standardizzare" questo script in Javascript che ho fatto circa 2 anni fa xD mi date una mano? Funzionava con IE ma non funziona con FF, per vedere la pagina bisogna andare qui e cliccare su "Imposta una posizione".
Funzionamento dello script: Trascina un pezzo tra quelli a destra e lo mette sulla scacchiera (per trascinare, bisogna cliccare sul pezzo e tenere premuto fino alla posizione desiderata). Ecco lo script, la funzione che sposta i pezzi è "posiziona":
Codice:<html> <head> <title>Imposta una posizione</title> <style type="text/css"> #scacchiera{ border-collapse: collapse; } #scacchiera td{ width: 35px; height: 35px; } .c_b{ background: #E1E2CF; } .c_n{ background: #A45246; } </style> <script type="text/javascript"> function main(){ document.getElementById("istruzioni").style.visibility = "visible" var pedina = document.getElementById("pedina"); var scacchiera = document.getElementById("scacchiera"); angolo_x = scacchiera.offsetLeft; angolo_y = scacchiera.offsetTop; while((scacchiera = scacchiera.offsetParent)!=null){ angolo_x += scacchiera.offsetLeft; angolo_y += scacchiera.offsetTop; } angolo_x += 1; angolo_y += 1; } function posiziona(e){ if(!e) var e = window.event; var dpezzo = (e.target) ? e.target : e.srcElement var body = document.getElementsByTagName("body")[0] var width = 35 var totwidth = 289 if(dpezzo.tagName!="IMG"||dpezzo.getAttribute("src")=="casella_vuota.gif"){ body.onmouseup = function(){ return false; } return false; } pezzo = dpezzo.getAttribute("src") dpezzo_x = dpezzo.offsetLeft; dpezzo_y = dpezzo.offsetTop; while((dpezzo = dpezzo.offsetParent)!=null){ dpezzo_x += dpezzo.offsetLeft; dpezzo_y += dpezzo.offsetTop; } i = e.x j = e.y muovi = "true"; body.onmousemove = function(e){ if(muovi=="true"){ if(!e) var e = window.event; pedina.innerHTML = '<img src="'+pezzo+'">' pedina.style.display = "block"; pedina.style.left = dpezzo_x-(i-e.x); pedina.style.top = dpezzo_y-(j-e.y); } } if(e.x>angolo_x&&e.x<angolo_x+totwidth+1) if(e.y>angolo_y&&e.y<angolo_y+totwidth+1){ var set_x = e.x-(angolo_x+1); var set_y = e.y-(angolo_y+1); if((set_x%(width+1))==0||(set_y%(width+1))==0) return false; id = Math.floor(set_x/(width+1))+Math.floor(set_y/(width+1))*8 scacchiera.getElementsByTagName("td")[id].innerHTML = '<img src="casella_vuota.gif">' document.getElementsByName("pezzi")[id].value = "-"; } body.onmouseup = function(e){ pedina.style.display = "none"; muovi = "false"; if(!e) var e = window.event; if(e.x>angolo_x&&e.x<angolo_x+totwidth+1) if(e.y>angolo_y&&e.y<angolo_y+totwidth+1){ var set_x = e.x-(angolo_x+1); var set_y = e.y-(angolo_y+1); if((set_x%(width+1))==0||(set_y%(width+1))==0) return false; id = Math.floor(set_x/(width+1))+Math.floor(set_y/(width+1))*8 scacchiera.getElementsByTagName("td")[id].innerHTML = '<img src="'+pezzo+'">' document.getElementsByName("pezzi")[id].value = pezzo.substr(pezzo.lastIndexOf("/")+1,pezzo.length-(pezzo.lastIndexOf("/")+1+4)); } } body.ondrag = function(){ return false; } } function imposta(){ opener.document.getElementById("chspos").innerHTML = '<input type="hidden" name="prepos">' for(i=0;i<64;i++) opener.document.getElementById("chspos").innerHTML += '<input type="hidden" name="'+i+'" value="'+document.getElementsByName("pezzi")[i].value+'">' opener.document.getElementsByTagName("form")[0].submit() } </script> </head> <body text="black" bgcolor="white" leftmargin=30 rightmargin=30 topmargin=30 bottommargin=30 onLoad="main()" onMouseDown="posiziona()"> <center> <div id="pedina" style="position:absolute;display:none"></div> <table cellpadding=0 cellspacing=0 width=100%><tbody valign="top"> <tr><td width=50%> <table id="scacchiera" width=289 height=289 bordercolor="black" border=1 cellpadding=0 cellspacing=0> <tr> <td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td> </tr><tr> <td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td> </tr><tr> <td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td> </tr><tr> <td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td> </tr><tr> <td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td> </tr><tr> <td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td> </tr><tr> <td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td> </tr><tr> <td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td><td class="c_n"><img src="casella_vuota.gif"></td><td class="c_b"><img src="casella_vuota.gif"></td> </tr> </table> </td><td align="right" width=50%> <table cellpadding=3 cellspacing=0> <tr><td><img src="pezzi/torre_bianca.gif"></td><td><img src="pezzi/torre_nera.gif"></td></tr><tr><td><img src="pezzi/cavallo_bianco.gif"></td><td><img src="pezzi/cavallo_nero.gif"></td></tr><tr><td><img src="pezzi/alfiere_bianco.gif"></td><td><img src="pezzi/alfiere_nero.gif"></td></tr><tr><td><img src="pezzi/regina_bianca.gif"></td><td><img src="pezzi/regina_nera.gif"></td></tr><tr><td><img src="pezzi/re_bianco.gif"></td><td><img src="pezzi/re_nero.gif"></td></tr><tr><td><img src="pezzi/pedone_bianco.gif"></td><td><img src="pezzi/pedone_nero.gif"></td></tr></table> <div style="display:none"> <script type="text/javascript"> for(i=0;i<64;i++){ document.writeln('<input type="hidden" name="pezzi" value="-">') }</script> </div> <div id="istruzioni" style="visibility:hidden;font-size:12pt">Trascina i pezzi<br>sulla scacchiera<br> <input type="button" value="Carica" onClick="imposta();self.close()"><input type="button" value="Chiudi" onClick="self.close()"></div> </td></tr> </table> </center> </body> </html>

LinkBack URL
About LinkBacks
