Explained code:
// Seu formulário
var form = document.getElementsByTagName('form')[0],
// Todos input[type=radio] com o nome "gol"
goalkeeper = form.gol,
// Todos input[type=radio] com o nome "tec"
trainer = form.tec;
/**
* Evento estilo-onchange para vários input[type=radio].
*
* @param array list
* @param function callback
*/
function addRadioChangeEvent(list, callback)
{
// Função que executa quando um input é provavelmente checado
// usando onkeydown, onclick, etc.
var fnc = function(e)
{
// Pega a índice do input[type=radio]
for(var i = 0, el; el = list[i]; i ++)
{
if(el === e.target) break;
}
// Checa se o input foi checado e se não é igual
// ao checado anteriormente
if(el.checked && checked !== i) {
// Memoriza o input checado
checked = i;
// Executa a função no segundo parâmetro já que o
// input foi modificado, e traz seu valor, e.g:
// "Milk", no 1st parâmetro
if(typeof callback === 'function') callback(el.value);
}
}, checked = NaN;
// Memoriza o input checado atualmente
(function()
{
for(var i = 0, el; el = list[i]; i ++)
{
if(el.checked) {
checked = i;
break;
}
}
})();
// Eventos usados em cada input
var evt = ['click', 'keydown', 'keyup'];
function addEvts(c)
{
// Percorre cada input
for(var b = 0, el; el = list[b]; b ++)
{
// Percore cada string na tabela 'evt'
for(var i = 0, e; e = evt[i]; i ++) c(el, e);
// E chama o callback ('c') para cada input com uma string do 'evt'
}
}
// Checa se o addEventListener é suportado pelo navegador
if(typeof (window['Element'] || window['HTMLElement'])['prototype']['addEventListener'] === 'function')
addEvts(function(el, e) { el.addEventListener(e, fnc) })
// Se addEventListener não for suportado, usa o attachEvent em vez
;else
addEvts(function(el, e) { el.attachEvent('on' + e, fnc) })
;
}
// Pega a sua imagem
var img = document.getElementsByTagName('img')[0];
// Adiciona o evento estilo-onchange para os input[type=radio] que
// que definem o goleiro.
addRadioChangeEvent(goalkeeper, function(value) {
switch(value)
{
case "Milk":
img.src = "?"; // imagem 1 ?
break;
case "Butter":
img.src = "?"; // imagem 2?
break;
default: // "Cheese"
img.src = "?"; // imagem 3?
}
});
// Adiciona o evento estilo-onchange para os input[type=radio] que
// que definem o técnico.
addRadioChangeEvent(trainer, function(value) {
// ?
});
