Utilizzare delle immagini al posto di Radio button e Checkbox
Pagina 1 di 2
L'esigenza di usare immagini al posto dei checkbox e dei radio button nasce dal fatto che, via CSS, gli elementi dei form sono difficilmente stilizzabili: elementi appunto come i checkbox, i radio button e le select box, non riescono ad essere rese "piatte" attraverso i fogli di stile, quindi è necessario ricorrere a qualche trucchetto per supplire a tale carenza estetica.
A tal fine possiamo utilizzare delle semplici immagini che, grazie a Javascript, possono tranquillamente sostituire questi &qyuot;brutti" elementi dei form.
Immagini per i checkbox ed i radio button
Utilizzando il proprio programma di grafica preferito, si creino quattro immagini; due rappresenteranno i checkbox non valorizzati ed i radio non valorizzati, mentre le altre due rappresenteranno i checkbox ed i radio valorizzati.
Nel mio NON essere un grafico, ho creato con il buon vecchio MS Paint le seguenti immagini (e relativi nomi dei file):
 | checkbox_pieno.jpg |
 | checkbox_vuoto.jpg |
 | radio_pieno.jpg |
 | radio_vuoto.jpg |
Salviamole nella nostra cartella di lavoro.
Codice HTML del form
All'interno della nostra cartella di lavoro, creiamo un file HTML e corrediamolo dal seguente codice:
<form name="modulo">
<p><b>SESSO</b></p>
<input type="hidden" name="sesso">
<p>
<img src="radio_vuoto.jpg" id="sesso_U" onclick="Sesso('U', 'D')" align="absmiddle"> Uomo
<img src="radio_vuoto.jpg" id="sesso_D" onclick="Sesso('D', 'U')" align="absmiddle"> Donna
</p>
<p><b>HOBBY</b></p>
<input type="hidden" name="hobby">
<p>
<img src="checkbox_vuoto.jpg" id="hobby_C" onclick="Hobby('C')" align="absmiddle"> Cinema
<img src="checkbox_vuoto.jpg" id="hobby_L" onclick="Hobby('L')" align="absmiddle"> Lettura
<img src="checkbox_vuoto.jpg" id="hobby_S" onclick="Hobby('S')" align="absmiddle"> Sport
</p>
<input type="button" value=" OK " onclick="Conferma()">
</form>
Analizziamolo.
Apriamo (e chiudiamo) regolarmente il tag <form>, importando le immagini dei checkbox e dei radio button al posti dei tradizionali elementi del form, impostando inizialmente le immagini rappresentanti il campo vuoto.
Ad ogni gruppo passiamo un ID con un prefisso uguale e col prefisso rappresentante (ad esempio) l'iniziale della descrizione dell'opzione.
L'immagine disporrà anche dell'evento onclick, ma a seconda che si tratti di un radio button o di un checkbox, valorizzeremo con due o un solo parametro la funzione di riferimento.
Nel caso del checkbox, passiamo solo il valore dell'opzione, ma nel caso del radio button, passiamo prima il valore dell'opzione e poi il valore che NON deve assumere.
A breve, analizzando le funzioni Javascript, saranno chiari questi motivi.
In fine, utilizzeremo un campo nascosto (di tipo hidden) in cui andare a memorizzare il valore o i valori che passeremo attraverso le nostre "immagini/campi".
L'aspetto del form sarà il seguente:
