permutar varias imágenes a la vez on onMouseOver

Hola a todos! Tengo un botón que está dividido en tres imágenes. El problema llega cuando utilizo onMouseOver y onMouseOut. El problema es que no permutan las imágenes. Se quedan como si el cursor estuviera encima. Está es mi función:

Código Javascript :

function cambiar () {
document.images["IMG1"].src = "recursos/w_y.png";
document.images["IMG2"].src = "recursos/t_y.png";
document.images["IMG3"].src = "recursos/yb_y.png";
}

function volver () {
IMG1.src = "recursos/w.png";
IMG2.src = "recursos/t.png";
IMG3.src = "recursos/yb.png";
}

Gracias por su ayuda

Mi recomendacion como 100pre es jquery maestro, es la solucion de tu vida, una vez la tengas lo que necesitas seria algo asi

Código Javascript :

$('#boton').hover(
function(){
  $('#img1').attr('src','recursos/w_y.png');
  $('#img2').attr('src','recursos/t_y.png');
  $('#img3').attr('src','recursos/yb_y.png');
},
function(){
  $('#img1').attr('src','recursos/w_y.png');
  $('#img2').attr('src','recursos/t_y.png');
  $('#img3').attr('src','recursos/yb_y.png');
}
);

Claro que para esto tu boton deberia sera algo como

Código HTML :

<button type="button" id="boton"><img id="img1" src="recursos/w.png" /><img id="img2" src="recursos/t.png" /><img id="img3" src="recursos/yb.png" /></button>

Espero te sea de utilidad.

COPY; PASTE, PLAY AND ENJOY

No lo había contemplado pero después también voy a necesitar jquery. No sabes como te lo agradezco!!!