Standardizzazione di uno script
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>
