Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    14

    cambiare posizione degli elementi sulla scacchiera al click di un pulsante

    Salve mi chiamo Andrea.

    Sto realizzando il sito web del Circolo Scacchi della mia città e, grazie alcuni suggerimenti, ho iniziato ad inserire nell'html alcune linee di javascript.

    In una pagina del sito ho realizzato una "scacchiera" con una semplice tabella 8x8 con celle di colore alterno, nelle quali celle (nelle prime e ultime due righe) ho posizionato dei caratteri speciali che rappresentano i pezzi degli scacchi nella posizione iniziale standard.

    Premetto che questa scacchiera avrà il compito NON di permettere di giocare a scacchi, MA semplicemente di visualizzare una serie di mosse di una partita x.

    Accanto alla scacchiera, ho posizionato dei bottoni (per il momento sono tre), i quali scatenano onclick altrettante funzioni "innerHtml" che, cancellando un carattere da una cella e riscrivendone un altro in una diversa posizione, simulano a tutti gli effetti il movimento dei pezzi; in aggiunta, alcune funzioni possono scrivere, in una cella adiacente la scacchiera, un commento opzionale, relativo ad una specifica posizione (per esempio: bottone 40 ----> mossa 40: "il Bianco perde un tempo").

    Quindi, cliccando in sequenza i bottoni, si ottiene la visualizzazione della partita dopo l'ultima mossa (in questo caso la terza!).

    La mia domanda è: come riuscire a permettere a chi visualizza la pagina di tornare indietro e di guardare una posizione precedente, senza che sia necessario ricaricare la pagina, per poi cliccare i bottoni fino a raggiungere la posizione desiderata?

    Qualcuno mi parla di array; di stati da assegnare agli argomenti di quest'ultimo; di matrici che rappresentino questi stati; di creare una history attraverso la quale scorrere con due pulsanti BACK e FORWARD.......bo?

    Ringrazio anticipatamente chi potesse e volesse rispondermi! E Grazie ad HTML.it!
    Ultima modifica di ciro78; 02-10-2016 a 12:02

  2. #2
    Utente di HTML.it
    Registrato dal
    Nov 2002
    residenza
    Brescia
    Messaggi
    81
    Bisognerebbe avere il link della pagina e dovresti postare il codice che hai scritto per vedere dove agire.
    La tua spiegazione è abbastanza chiara ma senza pagina.... e soprattutto senza codice.....

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    14
    codice:
    <head>
    <link href="style.css" hreflang="it" type="text/css" rel="stylesheet">
    
    </head>
    
    <body bgcolor="#F4F4F4">
    
    <div id="header">
    <div id="content">
    
    
    <!-- THE FOLLOWING TABLE HAS TO BE A CHESSBOARD -->
    
    
    <table id="scacchiera" width="1200px" height="400px" border="1" cellpadding="0" cellspacing="0" align="center" >
    
    <caption> PARTITA UNO </caption> 
    
    <tr>
    <td bgcolor="#E9E3E3" align="center" id="a8" class="casa"><font size="6">♜</font></td>
    <td bgcolor="#C8BFBF" align="center" id="b8" class="casa"><font size="6">♞</font></td>
    <td bgcolor="#E9E3E3" align="center" id="c8" class="casa"><font size="6">♝</font></td>
    <td bgcolor="#C8BFBF" align="center" id="d8" class="casa"><font size="6">♛</font></td>
    <td bgcolor="#E9E3E3" align="center" id="e8" class="casa"><font size="6">♚</font></td>
    <td bgcolor="#C8BFBF" align="center" id="f8" class="casa"><font size="6">♝</font></td>
    <td bgcolor="#E9E3E3" align="center" id="g8" class="casa"><font size="6">♞</font></td>
    <td bgcolor="#C8BFBF" align="center" id="h8" class="casa"><font size="6">♜</font></td>
    
    <td bgcolor="#DEE9E1" rowspan="8" width="400px" id="commento" class="commento"></td>
    
    <td bgcolor="#F4F4F4" rowspan="8" width="400px">
    
    <div>
    
    <button onclick="uno()">FIRST MOVES</button>
    <button onclick="due()">SECOND COUPLE OF MOVES</button> 
    
    </div>
    
    </td>
    </tr>
    <tr><tr><tr><tr><tr><tr><tr></table>
    
    
    <script>
    
    function uno() { 
    
         var x = document.getElementById("e2");
        x.innerHTML = "";
        var x = document.getElementById("e4");
        x.innerHTML = "♙";
         var x = document.getElementById("e7");
        x.innerHTML = "";
        var x = document.getElementById("e5");
        x.innerHTML = "♟";
    
        
    };
    
    </script>
    
    
    <script>
    function due() { 
    
         var x = document.getElementById("g1");
        x.innerHTML = "";
        var x = document.getElementById("f3");
        x.innerHTML = "♘";
        var x = document.getElementById("b8");
        x.innerHTML = "";
        var x = document.getElementById("c6");
        x.innerHTML = "♞";
    
                var x = document.getElementById("commento");
               x.innerHTML = "Il Bianco ha il vantaggio del tratto.";  
    
    });
    
    
    
    </script>
    
    
    
    
    </div>
    </body>
    
    
    
    
    <!-- FOGLIO DI STILE -->
    
    
    
    body{
        
    
        color: #153C1D;
        text-align: justify;
        
        padding: 200px 0 0 0;
        
    }
    
    #content
    
    {
    padding: 30 0 0 0;
    
    }
    #header
    {
    overflow:auto;  
    width: 100%; 
    height: 290px;  
    position: fixed; 
    top: 0;  
    left: 0; 
    
    
    }
    a {
    
    color: green;
    text-decoration: none;
    
    }
    a:hover {
        
    color:green;    
        
    }    
    a:visited    {
        
    color:green;    
        
        }    
            a:active{
                
    color:green;            
                
            }    
    #menu { 
     
    font-size: 13px;
    font-weight: bolder; 
    color:green; 
    text-decoration:none; 
    display:inline-block; 
    list-style-type:none; 
    margin: 5px;
     
    } 
    
    ul#menu {
        
    list-style: none;    
        
        }
    
    ul#menu li {
    
    float: left;
    display: block;
        
        } 
    
    #menu li {
        
        
        padding: 10px;
    font-weight: bold;
    
    
    }
    
    #menu li a:hover{
        
        
        color: black;
        border-bottom: 5px solid black;
    font-weight: bold;
    
    }
    
    #title {
    
     font-size:25px;
     color:white;
     font-weight:bolder;
     text-shadow: -2pt 2pt 2pt black ;
     
    }
    
    #scacchiera {
    
    border-collapse: collapse;
    
    }
    
    .casa {
    
    font-size: 32px;
    
    }
    
    .commento {
    
    margin: 5px;
    text-align: center;;
    
    }
    Ultima modifica di ciro78; 02-10-2016 a 12:02

  4. #4
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,372
    Questa puo' essere una delle tante soluzioni.

    codice HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    indice_partita1   = 0;
    inizio_partita    = new Array();
    inizio_partita[0] = new Array("e2","torre N1");
    inizio_partita[1] = new Array("e4","alfiere B1"); 
    inizio_partita[2] = new Array("e5","alfiere B2");
    inizio_partita[3] = new Array("e7","torre B1");  
    mosse_partita1 = new Array();
    //                             da    a  
    mosse_partita1[0] = new Array("e2","e4");
    mosse_partita1[1] = new Array("e4","e5");
    mosse_partita1[2] = new Array("e5","e6");
    mosse_partita1[3] = new Array("e6","e7");
    
    function inizio_partita1() {
     indice_partita1   = 0;
     document.getElementById("mossa").innerHTML = indice_partita1;
     
     var i = 0;
     for (i=1;i<=8;i++) {
       document.getElementById("e"+i).innerHTML = "&nbsp;";
     }
     
     var j = inizio_partita.length;
     for (i=0;i<j;i++) {
       document.getElementById(inizio_partita[i][0]).innerHTML = inizio_partita[i][1];
     }
    }
    function avanti_partita1() {
     if (indice_partita1 < mosse_partita1.length) {
       // salvo 
      mosse_partita1[indice_partita1][2] = document.getElementById(mosse_partita1[indice_partita1][0]).innerHTML;
      mosse_partita1[indice_partita1][3] = document.getElementById(mosse_partita1[indice_partita1][1]).innerHTML;
      
      document.getElementById(mosse_partita1[indice_partita1][1]).innerHTML = document.getElementById(mosse_partita1[indice_partita1][0]).innerHTML;
      document.getElementById(mosse_partita1[indice_partita1][0]).innerHTML = "&nbsp;";
      indice_partita1++;
      
      document.getElementById("mossa").innerHTML = indice_partita1;
     } else {
       alert('Non ci sono più mosse');
     }
    } // function avanti_partita1()
    function indietro_partita1() {
     if (indice_partita1 > 0) {
     // ripristino
     indice_partita1--;
     
     document.getElementById(mosse_partita1[indice_partita1][0]).innerHTML = mosse_partita1[indice_partita1][2];
     document.getElementById(mosse_partita1[indice_partita1][1]).innerHTML = mosse_partita1[indice_partita1][3]; 
     
      
     document.getElementById("mossa").innerHTML = indice_partita1;
     }
    } // indietro_partita1()
    //-->
    </script>
    </head>
    <body>
    <table summary="">
    <tr>
    <td id="e1" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
    </tr>
    <tr>
    <td id="e2" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
    </tr>
    <tr>
    <td id="e3" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
    </tr>
    <tr>
    <td id="e4" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
    </tr>
    <tr>
    <td id="e5" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
    </tr>
    <tr>
    <td id="e6" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
    </tr>
    <tr>
    <td id="e7" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
    </tr>
    <tr>
    <td id="e8" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
    </tr>
    </table>
    <input type="button" value="Inizio partita" onclick="inizio_partita1()"/>
    <input type="button" value="Avanti" onclick="avanti_partita1()"/>
    <input type="button" value="Indietro" onclick="indietro_partita1()"/>
    <br>
    Mossa : <span id="mossa"></span>
    </body>
    </html>
    
    Ridatemi i miei 1000 posts persi !!!!
    Non serve a nulla ottimizzare qualcosa che non funziona.
    Cerco il manuale dell'Olivetti LOGOS 80B - www.emmella.fr

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    14
    Be che dire Badaze....? Leggerò attentamente quello che mi hai scritto cercando di capirlo a fondo. GRANDE!

  6. #6
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,514
    @PANDREA
    benvenuto sul forum...ma prima di fare altre discussioni leggi bene il regolamento. Hai violato tutti i punti possibili in una discussione.
    Per adesso ho chiuso un occhio che sei nuovo al prossimo chiudo la discussione.

    @badaze
    fornire una soluzione senza spiegare un minimo è abbastanza inutile...l'utente ha la soluzione ma non saprà come risolvere un successivo problema. ovvio che non sei obbligato ma....sarebbe meglio.
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  7. #7
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,372
    @ciro78
    Ho fornito parte della soluzione. In informatica dopo un certo momento è difficile spiegare senza il codice.
    Poi i commenti ci sono . // salvo e // ripristino
    Ridatemi i miei 1000 posts persi !!!!
    Non serve a nulla ottimizzare qualcosa che non funziona.
    Cerco il manuale dell'Olivetti LOGOS 80B - www.emmella.fr

  8. #8
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    14
    @badaze ringrazio per avermi permesso di capire cosa devo fare per fare cosa devo fare! @ciro78 dico di aver compreso e non lo farò più, ma soprattutto spero di non aver fatto nulla di illegale! ps Adesso che credo di aver capito come postare un codice, vi allego il risultato a cui sto per arrivare

    codice:
    <table id="scacchiera">
    <tr>
    <td id="a8">♜</td>
    <td id="b8">♞</td>
    <!-- ECCETERA TUTTE LE 64 CASELLE-->
    </table>
    
    <script>
    
    
    var mossacorrente= 0
    
    var mosse = [
    
         {function uno() { 
    
         var x = document.getElementById("e2");
        x.innerHTML = "";
        var x = document.getElementById("e4");
        x.innerHTML = "♙";
         var x = document.getElementById("e7");
        x.innerHTML = "";
        var x = document.getElementById("e5");
        x.innerHTML = "♟";
    
        
    } },
    
        { function due() { 
    
         var x = document.getElementById("g1");
        x.innerHTML = "";
        var x = document.getElementById("f3");
        x.innerHTML = "♘";
        var x = document.getElementById("b8");
        x.innerHTML = "";
        var x = document.getElementById("c6");
        x.innerHTML = "♞";
    
        var x = document.getElementById("commento");
       x.innerHTML = "Il Bianco ha il vantaggio del tratto.";  
    
    } }
    
    ]
    
    function prossima() {
            if (mossacorrente < mosse.length) <!-- esegui mossacorrente?! -->
            mossacorrente++
          
                
               
               
    
    
    </script>
    Credo di aver semplificato molto (lo script non è ancora completo poichè devo capire ancora qualche passaggio) quello che mi è stato consigliato di scrivere e di conseguenza sono riuscito ad adattarlo al mio documento html. Certo, la struttura del codice sarà un po' più prolissa ma preferisco scrivere più "lentamente". @Ciro78 comunque è tutto ok con me, scherzi a parte? Ciao!

  9. #9
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,514
    ciao pandrea,
    nessun problema.

    il mio ruolo di moderatore mi impone di dirti certe cose. ma tali cose servono anche a te. se esponi bene troverai più facilmente chi ti aiuta

    buon proseguimento
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  10. #10
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    14
    codice:
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
    
    </head>
    
    <link href="style.css" hreflang="it" type="text/css" rel="stylesheet">
    
    </head>
    
    <body bgcolor="#F4F4F4">
    
    <div id="header">
    <table cellspacing="0" cellpadding="0" width="100%" height="60px">
    <tr>
    <td align="center" bgcolor="#002600"><br><img src="logolup.gif" alt="" /><br><br></td>
    </tr>
    <tr>
    <td bgcolor="green" align="center">
    <font id="title"><strong>C.S.D. LUPIÆ 1970</strong></font>
    <td>
    </tr>
    </table>
    
    <table cellspacing="0" cellpadding="0" width="100%" height="10px">
    <tr>
    <td bgcolor="#81C193" align="center">
    
    <ul id="menu">
    <li><a href="#">HOME</a></li>
    <li><a href="#">STORIA</a></li>    
    <li><a href="#">SOCIETÀ</a></li>
    <li><a href="#">TESSERAMENTI</a></li>
    <li><a href="#">TORNEI</a></li>
    <li><a href="#">BANDI</a></li>
    <li><a href="#">ARCHIVIO</a></li>
    <li><a href="#">NOTIZIE</a></li>
    <li><a href="#">CONTATTI</a></li>
    <li><a href="#">BIBLIOTECA</a></li>
    <li><a href="#">GALLERIA</a></li>
    </td>
    </tr>
    <tr height="10px">
    <td bgcolor="#F4F4F4"><font color="#F4F4F4">...</font></td>
    </tr>
    </table>
    
    </div>
    
    <div id="content">
    
    
    <table id="scacchiera" width="1000px" height="400px" border="1" cellpadding="0" cellspacing="0" align="center" >
    
    <caption align="center"> PARTITA UNO </caption>
    
    
    <tr>
    <td bgcolor="#E9E3E3" align="center" id="a8" class="casa"><font size="6" class="pezzo">♜</font></td>
    <td bgcolor="#C8BFBF" align="center" id="b8" class="casa"><font size="6" class="pezzo">♞</font></td>
    <td bgcolor="#E9E3E3" align="center" id="c8" class="casa"><font size="6" class="pezzo">♝</font></td>
    <td bgcolor="#C8BFBF" align="center" id="d8" class="casa"><font size="6" class="pezzo">♛</font></td>
    <td bgcolor="#E9E3E3" align="center" id="e8" class="casa"><font size="6" class="pezzo">♚</font></td>
    <td bgcolor="#C8BFBF" align="center" id="f8" class="casa"><font size="6" class="pezzo">♝</font></td>
    <td bgcolor="#E9E3E3" align="center" id="g8" class="casa"><font size="6" class="pezzo">♞</font></td>
    <td bgcolor="#C8BFBF" align="center" id="h8" class="casa"><font size="6" class="pezzo">♜</font></td>
    
    <td bgcolor="#DEE9E1" rowspan="8" width="600px" id="commento" class="commento"></td>
    
    
    
    </tr>
    <tr>
    <td bgcolor="#C8BFBF" align="center" id="a7" class="casa"><font size="6" class="pezzo">♟</font></td>
    <td bgcolor="#E9E3E3" align="center" id="b7" class="casa"><font size="6" class="pezzo">♟</font></td>
    <td bgcolor="#C8BFBF" align="center" id="c7" class="casa"><font size="6" class="pezzo">♟</font></td>
    <td bgcolor="#E9E3E3" align="center" id="d7" class="casa"><font size="6" class="pezzo">♟</font></td>
    <td bgcolor="#C8BFBF" align="center" id="e7" class="casa"><font size="6" class="pezzo">♟</font></td>
    <td bgcolor="#E9E3E3" align="center" id="f7" class="casa"><font size="6" class="pezzo">♟</font></td>
    <td bgcolor="#C8BFBF" align="center" id="g7" class="casa"><font size="6" class="pezzo">♟</font></td>
    <td bgcolor="#E9E3E3"  align="center" id="h7" class="casa"><font size="6" class="pezzo">♟</font></td>
    </tr>
    <tr>
    <td bgcolor="#E9E3E3" align="center" id="a6" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="b6" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="c6" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="d6" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="e6" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="f6" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="g6" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="h6" class="casa"><font size="6"><br></font></td>
    </tr>
    <tr>
    <td bgcolor="#C8BFBF" align="center" id="a5" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="b5" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="c5" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="d5" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="e5" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="f5" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="g5" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="h5" class="casa"><font size="6"><br></font></td>
    </tr>
    <tr>
    <td bgcolor="#E9E3E3" align="center" id="a4" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="b4" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="c4" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="d4" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="e4" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="f4" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="g4" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="h4" class="casa"><font size="6"><br></font></td>
    </tr>
    <tr>
    <td bgcolor="#C8BFBF" align="center" id="a3" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="b3" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="c3" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="d3" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="e3" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="f3" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#C8BFBF" align="center" id="g3" class="casa"><font size="6"><br></font></td>
    <td bgcolor="#E9E3E3" align="center" id="h3" class="casa"><font size="6"><br></font></td>
    </tr>
    <tr>
    <td bgcolor="#E9E3E3" align="center" id="a2" class="casa"><font size="6" class="pezzo">♙</font></td>
    <td bgcolor="#C8BFBF" align="center" id="b2" class="casa"><font size="6" class="pezzo">♙</font></td>
    <td bgcolor="#E9E3E3" align="center" id="c2" class="casa"><font size="6" class="pezzo">♙</font></td>
    <td bgcolor="#C8BFBF" align="center" id="d2" class="casa"><font size="6" class="pezzo">♙</font></td>
    <td bgcolor="#E9E3E3" align="center" id="e2" class="casa"><font size="6" class="pezzo">♙</font></td>
    <td bgcolor="#C8BFBF" align="center" id="f2" class="casa"><font size="6" class="pezzo">♙</font></td>
    <td bgcolor="#E9E3E3" align="center" id="g2" class="casa"><font size="6" class="pezzo">♙</font></td>
    <td bgcolor="#C8BFBF" align="center" id="h2" class="casa"><font size="6" class="pezzo">♙</font></td>
    </tr>
    <tr>
    <td bgcolor="#C8BFBF" align="center" id="a1" class="casa"><font size="6" class="pezzo">♖</font></td>
    <td bgcolor="#E9E3E3" align="center" id="b1" class="casa"><font size="6" class="pezzo">♘</font></td>
    <td bgcolor="#C8BFBF" align="center" id="c1" class="casa"><font size="6" class="pezzo">♗</font></td>
    <td bgcolor="#E9E3E3" align="center" id="d1" class="casa"><font size="6" class="pezzo">♕</font></td>
    <td bgcolor="#C8BFBF" align="center" id="e1" class="casa"><font size="6" class="pezzo">♔</font></td>
    <td bgcolor="#E9E3E3" align="center" id="f1" class="casa"><font size="6" class="pezzo">♗</font></td>
    <td bgcolor="#C8BFBF" align="center" id="g1" class="casa"><font size="6" class="pezzo">♘</font></td>
    <td bgcolor="#E9E3E3" align="center" id="h1" class="casa"><font size="6" class="pezzo">♖</font></td>
    </tr>
    <tr>
    <td colspan="9" class="casa"></td>
    </tr>
    </table>
    
    
    
    </div>
    </body>
    Salve, ulteriori questioni mi hanno fatto virare sulla soluzione "drag and drop", per permettere al visitatore di seguire l'ordine delle mosse, che verranno scritte in un div "commento" e, a mano, muovere i pezzi. Ho assegnato una classe ai font dei pezzi e nel css ho specificato, sicuramente sbagliando, draggable : "true"; mentre per le td con classe "casa" ho scritto sempre nel css target : "true";Ora, premetto di aver letto la pagina del sito riguardo all'argomento drag and drop, inoltre ho consultato la w3school ma non riesco a capire come adattare al mio testo la parte relativa alle funzioni da inserire nello script, nè tantomeno in che modo correttamente inserire le condizioni e anche se queste possono essere o meno inserite nel foglio di stile che posto subito sotto. @Ciro78 potresti darmi una piccola mano?

    codice:
    
    
    body{
        
    
        color: #153C1D;
        text-align: justify;
        
        padding: 200px 0 0 0;
        
    }
    
    #content
    
    {
    padding: 30 0 0 0;
    
    }
    #header
    {
    overflow:auto;  
    width: 100%; 
    height: 290px;  
    position: fixed; 
    top: 0;  
    left: 0; 
    
    
    }
    a {
    
    color: green;
    text-decoration: none;
    
    }
    a:hover {
        
    color:green;    
        
    }    
    a:visited    {
        
    color:green;    
        
        }    
            a:active{
                
    color:green;            
                
            }    
    #menu { 
     
    font-size: 13px;
    font-weight: bolder; 
    color:green; 
    text-decoration:none; 
    display:inline-block; 
    list-style-type:none; 
    margin: 5px;
     
    } 
    
    ul#menu {
        
    list-style: none;    
        
        }
    
    ul#menu li {
    
    float: left;
    display: block;
        
        } 
    
    #menu li {
        
        
        padding: 10px;
    font-weight: bold;
    
    
    }
    
    #menu li a:hover{
        
        
        color: black;
        border-bottom: 5px solid black;
    font-weight: bold;
    
    }
    
    #title {
    
     font-size:25px;
     color:white;
     font-weight:bolder;
     text-shadow: -2pt 2pt 2pt black ;
     
    }
    
    #scacchiera {
    
    border-collapse: collapse;
    
    }
    
    .casa {
    
    font-size: 32px;
    target: true;
    
    }
    
    .commento {
    
    margin: 5px;
    text-align: center;
    
    }
    
    .pezzo {
    
    draggable: true;
    
    
    }

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.