Botão ativo com outra imagem

Olá pessoal,

To trabalhando em um slider aqui e ele tem o efeito de mudar a imagem quando se passa o mouse nos botões laterais.

Preciso que quando os botões laterais estiverem ativos a imagem fique diferente...

Basicamente assim:

/applications/core/interface/imageproxy/imageproxy.php?img=https://uploaddeimagens.com.br/images/000/551/545/full/12.png&key=f7c3d1e0077e32b2d588b7f6a41eeddc25508a611af60be293378ae120172dd2" alt="12.png" />

O primeiro botão esta ativo e com um degrade, que já é uma imagem pronta.

Estou usando um codigo porém ele só faz esse efeito quando o mouse está em cima do botão, e eu preciso que ele fique ativo...

O codigo é esse:

<li><a href="#"><img src="./images/Compensa_business_button_off_EST.jpg" onmouseout="this.src='./images/Compensa_business_button_off_EST.jpg';" onmouseover="this.src='./images/Compensa_business_button_on_EST.jpg';" /></a></li>

Se alguém puder ajudar agradeço.