Clicky

Ir para conteúdo
rafaeloliveiraz

Botão ativo com outra imagem

Posts Recomendados

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.

12.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

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);
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

12.png

 

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

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

Visitante
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.


  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.



O Portal do Host

Dicas para sua empresa de hospedagem. Artigos, notícias, tutoriais e os aspectos da indústria de hospedagem.

Limestone Networks

A LSN tem sido parceira e patrocinadora do PDH, fornecendo uma plataforma segura e confiável.

Cloud - Servidores decicados - Co-location
×
×
  • Criar Novo...