No me funciona el onmouseout...

Estimados como están? Tengo una pregunta que se que debe ser una pavada, pero no logro darme cuenta de qué es lo que me está pasando. tengo un botón representado por una imagen, quiero que el botón cambie de imagen cuando el ratón pase por arriba y vuelva a la imagen original cuando el ratón salga del botón. Con el código pegado abajo, el botón cambia de imagen en el onmouseover pero nunca vuelve a la imagen original con el onmouseout.
Alguien podría ayudarme con esto? Gracias y saludos.

en el html
<div id="boton">
<img src="img/home.gif" alt="boton" onmouseover="cambiar_boton(1)" on onmouseout="volver_boton(1)" />
</div>
en el js
function cambiar_boton(bot){
switch(bot){
case 1:
document.getElementById("boton").innerHTML = "<img src='img/home1.gif' alt='boton' onmouseover='cambiar_boton(1)' onmouseout='cambiarboton(2)' />";
break;
}
}

function volver_boton(bot){
switch(bot){
case 1:
document.getElementById("boton").innerHTML = "<img src='img/home.gif' alt='boton' onmouseover='cambiar_boton(1)' onmouseout='cambiarboton(2)' />";

break;
}
}

En primera, no entiendo por que útilizar dos funciones prácticamente iguales.
La función se puede optimizar mucho más, ejemplo:

Código Javascript :

function cambiar_boton(num){
var boton = document.getElementById("boton");
if(num==1){ boton.src="img/home1.gif"; }
if(num==2){ boton.src="img/home2.gif"; }
}

Esa función sería suficiente para cambiar tu boton:

Código HTML :

<div>
 <img id="boton" src="img/home1.gif" alt="" onmouseout="cambiar_boton(2)" onmouseover="cambiar_boton(1)" />
</div>

Pruebalo. Saludos.

Funcionó bárbaro, al principio tenía todo en una función, pero como no me funcionaba cambié a dos funciones - la desesperación jeje - en fin, calculo que el error estaba en el innerhtml, muchas gracias y saludos.