ho tirato ad indovinare, non avendo sottomano il tuo xhtml.
ho provato una soluzione mettendo l'immagine come sfondo tramite CSS, l'ho validata col validatore del W3C e testata con I.E. Firefox e Opera.
Non saprei valutarne bene il livello di accessibilità, comunque se vuoi provare...
questo il CSS:
codice:/*questa la label */ label { display: block; border: 1px #ccc dashed; width: 150px; height: 55px; /*importante esplicitare larghezza e altezza*/ z-index: 100; overflow: visible; } /* le mie aggiunte */ div, form, label, input {margin:0; padding: 0;} /* qui inserisci le immagini come sfondi*/ .primo_radio { background: url(foto1.jpg) no-repeat 20px 0; } .secondo_radio { background: url(foto2.jpg) no-repeat 20px 0; } .terzo_radio { background: url(foto3.jpg) no-repeat 20px 0; } .no /*questa per l'accessibilità, ma ti ripeto, da verificare la sua validità*/ { position: absolute; top: -3000px; left: -300px; }
e questo l'xhtml (ho messo gli a capo tra i label, input e span per non allargare troppo la finestra, ma è meglio che nel codice li togli):
ciao!!codice:<form id="prova" action="boh.php" method="get"> <div> <label for="radiouno" class="primo_radio"> <input type="radio" name="scelta" value="uno" id="radiouno" /> <span class="no">uno</span> </label> <label for="radiodue" class="secondo_radio"> <input type="radio" name="scelta" value="due" id="radiodue" /> <span class="no">due</span> </label> <label for="radiotre" class="terzo_radio"> <input type="radio" name="scelta" value="tre" id="radiotre" /> <span class="no">tre</span> </label> </div> </form>

Rispondi quotando