Botão ativo com outra imagem

[rafaeloliveiraz]

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 igual a imagem em anexo.

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

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

 

O código é 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.

[Pedro Sodre]

Faça via CSS utilizando o :hover.

[Joel Emanoel]

Você vai ter que acrescentar uma class chamada active ex:

<li class="active"><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>

li.active{
  background:url(IMAGEM AQUI);
}

 

[charless]

Em 23/11/2015 15:40:32, rafaeloliveiraz disse:

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 igual a imagem em anexo.

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

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

 

O código é 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.

 

Acredito que isso pode ser o que você procura!  ;)

http://www.jqueryscript.net/slider/Easy-Customizable-jQuery-Image-Slider-Plugin-reSlider.html