enlace con imagen cambiante para menu

Hola a todos! Antes que nada quiero agradecer a Jorgens por tomarse el tiempo para que otros podamos aprender y de una manera tan divertida y amena. Se nota que soy nueva en esto? jeje En fin... mi pregunta:
Estoy haciendo ya mi primera página (yei!) y en el menu horizontal quisiera hacer que al poner el ratón encima y al hacer click cambiara de color. Primero les comento que cada enlace lo hice con una imagen. Digamos que en vez de poner una lista con los titulos hice puros divs con una imagen en cada uno para que se pareciera al menu que tiene CCTW con pestañas. Esto ya lo logré [:D] Después cree la misma imagen de la pestaña pero con otro color y lo que pensaba hacer era rutearla para que cuando se pusiera el ratón encima cambiara a esta otra pero no consigo lograrlo. He buscado en todos lados en esta página y en otras (aunque Jorgens se enoje [:(]) pero las explicaciones que vienen no me han quedado para nada claras. Ojalá alguien me pudiera ayudar. Si necesitan que ponga el codigo diganme por favor. Gracias de antemano y saludos!
#menu a {background-image:url(imagen1);
}
#menu a:hover {background-image:url(imagen2);
}
Gracias ricky pero trate asi y no me funcionó. La manera en la que conseguí que funcionara fue la siguiente y espero le sirva a alguien:

1.- Hice la misma imagen con elcambio de color como queria que se viera (la primera es el nombre del boton y la segunda es el nombre + la palabra rojo -porque asi queria que se viera-). Ambas del mismo tamaño.
2.- En la plantilla puse el siguiente codigo en el head:
<SCRIPT>
function cambiar1 () {document.images["menu1"].src = "../objetos/menuiniciorojo.png";}
function volver1 () {menu1.src = "../objetos/menuiniciorojo.png";}
function cambiar2 () {document.images["menu2"].src = "../objetos/menuproductosrojo.png";}
function volver2 () {menu2.src = "../objetos/menuproductos.png";}
function cambiar3 () {document.images["menu3"].src = "../objetos/menuprestamorojo.png";}
function volver3 () {menu3.src = "../objetos/menuprestamo.png";}
function cambiar4 () {document.images["menu4"].src = "../objetos/menupreguntasrojo.png";}
function volver4 () {menu4.src = "../objetos/menupreguntas.png"
function cambiar5 () {document.images["menu5"].src = "../objetos/menucontactorojo.png";}
function volver5 () {menu5.src = "../objetos/menucontacto.png";}
</SCRIPT>

3.- dentro de body puse lo siguiente:
<div id="menuinicio"><a href="../inicio/inicio.html" onMouseOver="cambiar1();" onMouseOut="volver1();"><img src="../objetos/menuiniciorojo.png" width="160" height="39" alt="Inicio" name="menu1"></a></div>
<div id="menuproductos"><a href="../productos/productos.html" onMouseOver="cambiar2();" onMouseOut="volver2();"><img src="../objetos/menuproductos.png" width="160" height="39" alt="Nuestros Productos" name="menu2"></a></div>
<div id="menuprestamo"><a href="../prestamo/prestamo.html" onMouseOver="cambiar3();" onMouseOut="volver3();"><img src="../objetos/menuprestamo.png" width="160" height="39" alt="Quiero un Préstamo" name="menu3"></a></div>
<div id="menupreguntas"><a href="../preguntas/preguntas.html" onMouseOver="cambiar4();" onMouseOut="volver4();"><img src="../objetos/menupreguntas.png" width="160" height="39" alt="Preguntas Frecuentes" name="menu4"></a></div>
<div id="menucontacto"><a href="../contacto/contacto.html" onMouseOver="cambiar5();" onMouseOut="volver5();"><img src="../objetos/menucontacto.png" width="160" height="39" alt="Contáctanos" name="menu5"></a></div>

4.- en la hoja de estilos puse esto:
#menuinicio {float:left; width:160px;}
#menuproductos {float:left; width:160px;}
#menuprestamo {float:left; width:160px;}
#menupreguntas {float:left; width:160px;}
#menucontacto {float:left; width:160px;}

y la capa que engloba a todos los botones está con un width de 800px (la suma de todos los width).

Un poco lioso pero funcionó je

Saludos desde Mexico!
Puede que te haya funcionado pero la forma correcta es como te dije, poniendo la segunda imagen en la accion hover, seguro te falto poner display u otro codigo, en fin, saludos.