En tu código sólo veo el active 2 veces. Uno de esos es:
Código CSS:
Ver original.BYIMAG5{position:absolute;width:85px;height:38px;background-image:url(imag_b/bt4.jpg);background-repeat:no-repeat;left:520px; top:0px}
.BYIMAG5:hover{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}
.BYIMAG5:active{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}
Y todos tienen el mismo fondo (b4.jpg). Para .BYIMAG4 has hecho algo parecido, sólo es diferente en active.
Te paso uno de los sitios que hice hace poco como ejemplo:
http://www.cofatuc.org.ar/olimpiadas2011/
Si te fijás tenés 3 botones grandes con un estado inicial. Al mover el mouse por encima de ellos, cambia el color del dibujo y al presionarlo da un efecto de hundido. Esto lo logro con esta imagen:
Y con este código CSS:
Código CSS:
Ver original#lugares{
background:url(../images/boton-lugares.png) top left no-repeat;
}
#inscripcion{
background:url(../images/boton-inscripcion.png) top left no-repeat;
}
#actividades{
background:url(../images/boton-actividades.png) top left no-repeat;
}
#botones a:hover{
background-position:top center;
}
#botones a:active{
background-position:top right;
}
Diferentes imagenes para cada botón, pero posicionadas en forma diferente para :hover y :active. :active debe estar siempre después de :hover.
No es complicado, revisá tu CSS porque no es correcto lo que estás haciendo.