se debe a que css aplica las imágenes sobre el background, y tu tienes la otra sobre un <img>, son diferentes y la imágen de la etiqueta img siempre solapará a la de fondo porque tiene una posición superior en el orden Z.
tienes 2 opciones:
-hacer el cambio con javascript
:
<img ...
onmouseover="
this.src='css/images/facebook_on.png';"
onmouseout="
this.src='css/images/facebook_off.png';" />
-eliminar la <img> y usar un div con el tamaño de la imagen para colocar con CSS la imagen del botón.