Immagini invece del radio button

[DigItalWarrior]

Ciao ragazzi, ho bisogno del vostro prezioso aiuto.
Ho un form dinamico in ajax graficamente carino dove appaiono una serie di radio in base al numero di risultati che inbruttiscono e non poco il form. Su segnalazione di alcuni utenti avevo pensato di sostituire questi radio con delle piccole gif per renderlo più carino. Adesso però mi sorge qualche dubbio:
Per fare questo è per forza necessario javascript o basta solo il css? Se è necessario javascript e siccome non so proprio da dove iniziare, se ne siete a conoscenza potreste postarmi qualche pagina di esempio o qualche tutorial considerando che si tratta di un form ajax?

Grazie in anticipo

[cavicchiandrea]

http://javascript.html.it/script/ved...i-con-uniform/
http://javascript.html.it/script/ved...ersonalizzati/

[DigItalWarrior]

Ciao Andrea. Grandissimi gli esempi di HTML.it, non li conoscevo.
Grazie mille, vado subito a fare i compiti.

[DigItalWarrior]

E' un po' complicato utilizzare gli script che mi hai proposto perché sto utilizzando joomla per questo lavoro e purtroppo non posso utilizzare jquery perché provoca conflitti con un modulo.
Nel frattempo ho trovato questo piccolo codice che mi si adatterebbe alla perfezione se non fosse che su una singola pagina funziona bene mentre se la utilizzo con ajax no.

Suppongo che il problema si trovi nel fatto che qualcosa si perde tra pagina chiamante e pagina php.

Questo è il codice:

<script> 

var radioimages =
{
on :createImage("on.gif"),
off:createImage("off.gif")
}

function createImage(src){ var img = new Image(); img.src = src; return img; }

function radioToggle(button)
{

var form = button.form,
rads = form.elements['rad'],
rad, k = 0,
images = form.getElementsByTagName("img");

while(rad=rads[k])
images[k++].src = rad.checked
? radioimages.on.src
: radioimages.off.src ;
}

</script> 
<form> 
  <input type="radio" name="rad" onclick="radioToggle(this)"> 
  [img]off.gif[/img]
 
  <input type="radio" name="rad" onclick="radioToggle(this)"> 
  [img]off.gif[/img]
 
  <input type="radio" name="rad" onclick="radioToggle(this)"> 
  [img]off.gif[/img]
 
  <input type="radio" name="rad" onclick="radioToggle(this)"> 
  [img]off.gif[/img]
 
<form>

Io sto procedendo cosi:
Sulla pagina chiamante metto lo script js e sulla pagina php metto soltanto

$status[$i] = "<input type=\"radio\" name='rad' value=\"$i\" onclick=\"radioToggle(this)\"><img src=\"off.gif\" width=\"30\" height=\"30\">"; 

Ho verificato con degli alert a che punto si interrompe lo script e il problema è nella riga con la funzione

rads = form.elements['rad'],

.

Poi una domanda: è giusto mettere lo script nella pagina chiamante? Penso di si perché gli alert ripondono quindi la funzione "radioToggle(this)" va.
Cosa potrebbe essere a dare problemi a quella riga?

Edit: Dimenticavo. L'errore che mi da IE è "necessario oggetto".

[DigItalWarrior]

Ok. Per non aprire un altro thread riprendo questo:
Sto provando a farmelo da me e penso di essere a buon punto visto che fino alla selezione dell'immagine all'onclick funziona bene.
Adesso il problema credo stia nell'applicare il ciclo "for" per fare in modo che le immagini del radio non cliccato vengano ripristinate.

<script type="text/javascript">
var RadioCheckedImage = new Image();
var RadioUncheckedImage = new Image();

RadioCheckedImage.src = "checked-radio.jpg";
RadioUncheckedImage.src = "unchecked-radio.jpg";

function RadioClicked(radioid) {
document.getElementById(radioid).checked=true;
document.getElementById('img'+radioid).src = RadioCheckedImage.src;
}

//qui manca il ciclo for (credo) che ripristini le immagini come da "RadioUncheckedImage.src"
</script>

Ho provato a dare un occhio alla guida HTML sul ciclo for ma non so proprio come applicarla nel mio caso perché li si fa un esempio su un array.
Me la date una mano?