eseguire un checked di un checkbox tramite una immagine link

**alduccio** · 30-11-2009, 21:24

Salve,
sto concludendo un gioco di poker creato con il linguaggio php.
Conosco molto bene tale linguaggio ma non ho mai approfondito mai il linguaggio javascript.
Praticamente...nel gioco l'utente per selezionare una carta deve cliccare col mouse sul checkbox posto sotto le 5 carte.
Io vorrei invece, per velocizzare il gioco, fare in modo che le carte diventino cliccabili e che dinamicamente spunterebbero il checkbox della stessa carta.
In questo modo l'utente non deve stare lì a mirare il checkbox ma può cliccare comodamente sulla carta.
Sicuramente bisogna creare una funzione in javascript ma non saprei da dove partire, non conoscendo bene il linguaggio.
Una aiuto per questa funzione? Grazie

**fcaldera** · 30-11-2009, 21:56

metti l'immagine della carta come background dell'elemento <label> il quale avrà attributo "for" settato per spuntare la corrispondente checkbox

**alduccio** · 30-11-2009, 22:03

grazie per la tua risposta ma non capisco come dici, forse un piccolo esempio potrebbe aiutarmi, grazie per dedicarmi un po del tuo tempo

**fcaldera** · 30-11-2009, 22:21

Originariamente inviato da alduccio
grazie per la tua risposta ma non capisco come dici, forse un piccolo esempio potrebbe aiutarmi, grazie per dedicarmi un po del tuo tempo

mi alleghi l'immagine o il link con un paio di carte da gioco?
oppure posso usare queste come esempio?

**alduccio** · 30-11-2009, 22:51

azz...che belle carte che mi hai fatto trovato...puoi utilizzare queste se vuoi, ciao grazie

**fcaldera** · 30-11-2009, 23:13

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>cards</title>

        <style type="text/css">
        #hands fieldset {
            height      : auto;
            overflow    : hidden;
            border      : 0;
            margin      : 0;
            width       : 380px;
        }

        #hands label {
            display     : inline;
            width       : 180px;
            height      : 252px;
            line-height : 1000px;
            text-align  : right;
            cursor       : pointer;
            border      : 1px #cfcfd2 solid;
        }

            #hands .card1 { float  : right; }
            #hands .card2 { float  : left; }


        label.card input {
        }

        /* 10 di quadri */
        #q10 {
            background: url(http://upload.wikimedia.org/wikipedi...-sm-235-Td.png) top left no-repeat;
        }

        /* J di fiori */
        #fj {
            background: url(http://upload.wikimedia.org/wikipedi...-sm-244-Jc.png) top left no-repeat;
        }

        </style>

    </head>

<body>

    <form id="hands">
    ...        

        <fieldset>

            <label for="player3_card2" id="fj" class="card2">
                <input type="checkbox" name="p3_2" id="player3_card2" /></label>

            <label for="player3_card1" id="q10" class="card1">
                <input type="checkbox" name="p3_1" id="player3_card1" /></label>

        </fieldset>

    ...
    
        

La carta #1 è quella più a destra</p>

        <input type="submit" value="invia carte" />
    </form>
</body>
</html>

copia e incolla
l'esempio però non è ottimizzato: sarebbe indicato avere un'unica immagine (una sprite) contenente tutte le carte (che non avevo) e poi settare il background-position per ciascuna carta in modo da caricare una sola immagine anziché 52 immagini distinte.

se vuoi visualizzare la checkbox basta eliminare il line-height dallo stile.

provalo con un po' di browser che ti servono per vedere se funziona ovunque. (forse su qualche vecchia versione di safari non funzionerà)

**alduccio** · 30-11-2009, 23:46

fcaldera questo è un buon rimedio ma io vorrei che i checkbox siano sempre visibili ed il click dell'immagine siano solo una altervativa, guarda ti mostro una prova che ho fatto ma non funziona:

echo '<center>

echo '<center><input type="checkbox" id="checkbox" name="carta0" value="'.$carta[0].'">

dove richiama questa tipo di funzione:
echo '<script type="text/javascript">
function check(checkbox) {
document.getElementById(checkbox1).checked = "checked";
}
</script>';

cosa ne pensi?

**fcaldera** · 01-12-2009, 00:27

Originariamente inviato da alduccio
fcaldera questo è un buon rimedio ma io vorrei che i checkbox siano sempre visibili

Originariamente inviato da fcaldera
se vuoi visualizzare la checkbox basta eliminare il line-height dallo stile.

e aggiungo: posizionando opportunamente le checkbox puoi anche spostarle al di fuori dell'immagine
In generale, se si può fare a meno di usare javascript, è meglio usare una soluzione che non ne fa impiego poichè mantiene la pagina accessibile e le funzionalità non sono dipendenti dagli script.

**alduccio** · 01-12-2009, 12:27

bene...allora provo è ti aggiorno

**alduccio** · 07-12-2009, 22:21

lo script è sicuramente funzionante ma troppo diverso dal resto del codice già scritto.
praticamente il programma è già completo e stravolgere il tutto per addattarlo e complicato.
Hai un metodo in javascript più instantaneo, del tipo ...chiama funzione, esecuzione e ritorno.

ti mostro il pezzo del codice interessato:

echo '<center>

';

echo '<form action="http://localhost/poker2.php" method="post" name="vai">';
echo '<center><input type="checkbox" id="checkbox" name="carta0" value="'.$carta[0].'">
<input type="checkbox" id="checkbox2" name="carta1" value="'.$carta[1].'">
<input type="checkbox" id="checkbox3" name="carta2" value="'.$carta[2].'">
<input type="checkbox" id="checkbox4" name="carta3" value="'.$carta[3].'">
<input type="checkbox" id="checkbox5" name="carta4" value="'.$carta[4].'"></center>';
echo '<center><input type="submit" name="submit" value="Scarta carte"></form></center>';

Spero che tu mi possa ancora aiutare, ciao

Discussione: eseguire un checked di un checkbox tramite una immagine link

Strumenti discussione

Ricerca discussione

Visualizza

eseguire un checked di un checkbox tramite una immagine link

Permessi di invio