Es mas sencillo hacerlo usando jquery y el atributo background position.
Lo que tienes que hacer es juntar servicio.png y servicio_activo.png dentro de una misma imagen de modo que quede una al lado de la otra, de tal forma que cuando pongas esa imagen como fondo, solo se vea una de las dos y la otra quede oculta por fuera del div.
Hecho esto solo queda escribir un par de lineas con jquery, algo como esto:
Código Javascript :
$(".selector_de_tu_boton").click(function() {
$(this).css('backgroundPosition', '60px 0px');
$(".selector_de_los_otros_botones").css('backgroundPosition', '0px 0px');
});Lo que hace es que cuando le das click al botón, este desplaza la posición del fondo, ocultando la imagen actual y mostrando la que había quedado oculta anteriormente, el primero valor define el desplazamiento horizontal y el segundo el vertical en pixeles, así que tendrás que cuadrarlos según la dimensión de tus imágenes.
La segunda linea dentro de la función devuelve algún otro botón a su estado inicial.
es solo un ejemplo pero creo que con eso ya te puedes defender
