Yo lo que uso es esta función, que tienes que meterla en el HEAD de la página:
<SCRIPT LANGUAGE="JavaScript">
<!--
function CambiarImages(valor, imagen) {
document.images[valor].src=imagen
}
//-->
</SCRIPT>
Y dentro del BODY, cuando quieras cambiar una imagen usas esto:
<IMG SRC="imagen1"
onmouseover='CambiarImages(0, "imagen2")'
onmouseout='CambiarImages(0, "imagen1")'
height="20" width="30"
/>
El primer parametro que le pasas a la función es el numero de la imagen de esa página que vas a sustituir: Por ejemplo si quieres sustitur la primera imagen que aparece en la pagina, pones CambiarImages(0, "imagen2") , si quieres la segunda, CambiarImages(1, "imagen2")... es importante que el número coincida.
En el ejemplo que te he puesto, la imagen se cambia al pasar el raton por encima, y vuelve a la inicial al quitarlo de encima. Si quieres que la imagen se cambie al hacer clic, en vez de
onmouseover='CambiarImages(0, "imagen2")'
tienes que usar
onclick='CambiarImages(0, "imagen2")'
Espero que te haya servido.