Publicado em 23 de nov.

Botão ativo com outra imagem

#javascript #imagem #ativo #botão #mudar

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:

Se alguém puder ajudar agradeço.

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Allan S. Craveiro· 23 de nov.

Acredito que utilizar mais de uma imagem não seja o correto, até porque você deveria fazer um pre-load nela para que ela não demore a carregar. Você pode utilizar um gradiente através de CSS, com a propriedade a:hover

O seu degrade ficaria mais ou menos assim:

background: rgba(255,255,255,1);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(30%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );

Não tem muito segredo e para facilitar você pode utilizar este site para fazer o seu degrade de maneira fácil:

http://www.cssmatic.com/gradient-generator#'\

Espero te ajudado, comente aqui caso não consiga :)

Rafaeloliveiraz· 23 de nov.

Olá Alan,

Agradeço muito por sua atenção e ajuda.

O problema é que um cliente me mandou as imagens e pediu para que ficasse assim... e como as imagens estão todas prontas já gostaria de fazer como ele me pediu.

Estou trabalhando com Js, porém só consegui deixar uma imagem padrão no final de todos os botões, o codigo seria esse:

g.find(".nav").children("li").eq(current).css("background-image","url("+directory+"imagem.gif)").css("border-bottom","none");

Veja como fica:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/9gOZUVr.png&key=e9232ca4e035256cf911e7ea8d13e7cb03d490b88bb174fa90ccae44b4b629f3" alt="9gOZUVr.png" />

Se eu conseguisse mudar essa imagem verde de fundo para o botão transparente e deixar por cima do botão atual estaria perfeito...

Colocar por frente creio que não seja complicado porém preciso deixar uma imagem individual por botão.

Tem alguma ideia de como posso fazer?