onChange in un form che modifichi immagini

[lomiz]

Premetto che non so niente di Javascript ma ho guardato tutte le guide che ho trovato.
Ho creato in php un tool per un gioco on-line a questo indirizzo.
Il primo imput del form sono due "radio" (Warewolf e Vampire) come da immagine:



Più in basso ci sono due immagini come da figura:



La prima rappresenta il primo radio (Warewolf), la seconda il secondo (Vampire).

Vorrei che finchè nessuno dei due campi radio sia evidenziato fossero invisibili-nascoste ossia così:




Ma nel caso il visitatore selezionasse il primo radio che vengano così:



quando invece seleziona il secondo si invertissero di posizione:





Ho cercato in tantissime guide e penso di aver capito che bisogna usare onChange nel tag delle immagini ma non riesco a capire in che sintassi.

Mi sapreste dare una mano?

[Andrea1979]

Prova così:

i due checkbox diventano

<input name="breed" type="radio" value="0-15" checked onclick="set_img('ww','werwolf','vp','vampir');">Werewolf

					<input name="breed" value="16-25" type="radio" onclick="set_img('ww','vampir','vp','werwolf');">Vampire

e nell head aggiungi

<script language="javascript">
function set_img(a,b,c,d) {
  document.getElementById(a).getElementsByTagName('img')[0].src = "images/icon_"+b+".gif";
  document.getElementById(c).getElementsByTagName('img')[0].src = "images/icon_"+d+".gif";
}
</script>

e sistema un po' di inglese che pare brutto

[lomiz]

Ho fatto esattamente come hai detto ho messo sulla head:

function set_img(a,b,c,d) {
  document.getElementById(a).getElementsByTagName('img')[0].src = "images/icon_"+b+".gif";
  document.getElementById(c).getElementsByTagName('img')[0].src = "images/icon_"+d+".gif";
}
</script>

e ho sostituito i 2 vecchi imput dei radio con:

<input name="breed" type="radio" value="0-15" checked onclick="set_img('ww','werwolf','vp','vampir');">Werewolf

<input name="breed" type="radio" value="16-25"  onclick="set_img('ww','vampir','vp','werwolf');">Vampire

Ma non succede niente.
Quando i radio sono deselezionati le immagini si vedono ancora e non sono invisibili e quando ne seleziono uno rimangono lì dove sono.
Ho provato sia con Firefox che con IE ma non cambia niente. Consigli?

[Andrea1979]

ah, scusa, mancava una cosa:

devi inserire due div nella pagina: dove hai le immagini, invece di

<td>[img]...blah blah[/img]</td>

devi mettere:
nei lupi mannari

<td><div id="ww">[img]..blah blah[/img]</div></td>

e nei vampiri

<td><div id="vp"><img src=2..."></div></td>

[lomiz]

Perfetto! Adesso funziona!
Siccome però io le cose le voglio capire ti espongo dei i miei dubbi.

function set_img(a,b,c,d) {
  document.getElementById(a).getElementsByTagName('img')[0].src = "images/icon_"+b+".gif";
  document.getElementById(c).getElementsByTagName('img')[0].src = "images/icon_"+d+".gif";
}
</script>

Non riesco proprio a capire questa funzione. Mi dai una mano?

Cioè capisco che a,b,c,d sono i 4 parametri della funzione che poi sarebbero

<input name="breed" type="radio" value="0-15" checked onclick="set_img('ww','werwolf','vp','vampir');">Werewolf

<input name="breed" type="radio" value="16-25" onclick="set_img('ww','vampir','vp','werwolf');">Vampire



ma più di così no...