Botão dinamico

Enrique René · 17 de fevereiro de 2015

Olá, galera.

Eu fiz os botões do meu menu (o site ainda não está no ar ainda) no photoshop, para cada botão duas imagens, uma sendo a imagem do botão normal que ficará presente no site e outra imagem mais escurecida dando o efeito de afundamento do botão ao clique.
Fiz as funções em JavaScript e salvei num arquivo a parte "botões.js", e chamei nas páginas do site. Funcionou perfeitamente quando as páginas estavam como *.html, mas depois quando passei pra *.php o JavaScript funciona mas não troca a imagem (eu fiz um teste pra verificar se o JS estava sendo chamado colocando a função alert('teste'); e a pop-up aparecia sem problemas.

Eu queria saber uma maneira de trocar a imagem para esse botão afundado ao clique diretamente no php ou html, ou então como consertar esse problema com o JS.

A codificação do menu é esta:

<table align="center" border="0"><tr>             <td><input type="image" width="100" alt="Home page" src="imagem/Homepage.jpg" onclick="hpclick();hptimer();location.href='index.php'"/></td> (o que está riscado é o que estava mas tirei. Na verdade comecei usando <td><a href="..."><img src="..." id="homepage"(JS abaixo)></a></td>            (Mais alguns botões aqui, mas não vou escrever pra não tornar o post desnecessariamente maior do que já está)    </tr></table>

Lá em cima no <head> está:

<head><meta charset="utf-8"><title>título</title>                <link rel="stylesheet" href="config.css"/>                <script language="JavaScript" src="botões.js"></script></head>

No JS (arquivo botões.js):

function hpclick(){        var hpc = document.getElementById('homepage');                hpc.src = "imagem/HomepageClick.jpg"        }    function hprestore(){        var hpc = document.getElementById('homepage');                hpc.src = "imagem/Homepage.jpg"        }    function hptimer(){        setTimeout('hprestore()',180)        }

Não tenho nenhuma pretenção de manter algo do meu código, só quero que o meu botão afunde (mude para a imagem escurecida *.jpg) ao clique e volte ao normal após um tempo (como no timer acima), dando efeito de clique.

Desde já agradeço a ajuda

DiF · 17 de fevereiro de 2015

Olá.

veja estes dois exemplos:

Com efeito de audio quando pressionado além do efeito desejado com a imagem.

este usa javascript

http://jsfiddle.net/Calou/GCdDt/

Este na minha opinião é melhor, por ser mais leve.. usa só CSS, sem imagens... o tempo de carregamento é melhor.

http://cssdeck.com/labs/push-the-buttons

Enrique René · 19 de fevereiro de 2015

Olá.

veja estes dois exemplos:

Com efeito de audio quando pressionado além do efeito desejado com a imagem.

este usa javascript

http://jsfiddle.net/Calou/GCdDt/

Este na minha opinião é melhor, por ser mais leve.. usa só CSS, sem imagens... o tempo de carregamento é melhor.

http://cssdeck.com/labs/push-the-buttons

Pow, achei maneiro o botão com som em javaSc mas vou seguir tua sugestão no CSS, até porque o botão que desenhei é bem parecido com aquele, só tenho que colocar mais border-radius e ta quase igual.

valeu mesmo pela ajuda

Enrique René · 20 de fevereiro de 2015

@dif,

Fui na sua sugestão aquela hora e vi o botão funcionando. Adaptei pro meu site e ele nao afundava.

Copiei e colei todo o código tanto CSS quanto HTML, e não funcionava... nao sei mais o que pode ser.... :'(

DiF · 20 de fevereiro de 2015

@Enrique René

Posta aqui o código.

PS: evita de copiar e colar códigos da internet.. pois acontece isso(não funciona)... precisa entender como funciona.

Enrique René · 20 de fevereiro de 2015

Aqui está o código HTML

<table align="center" border="0"><tr>        <td><a class="botao">Home page</a></td><... mais td's, /tr e /table>

O arquivo CSS é chamado la no <head>

No arquivo CSS:

.botao {    position: relative;    width: 100px;    height: 30px;    text-align: center;    color: #FFF;    line-height:30px;    display: block;    margin: 15px;    }.botao:before {    background:blue;    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(blue));        -webkit-border-radius:20px;    -moz-border-radius:20px;    border-radius:20px;        -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;    box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;        position: absolute;    content: "";    left: -6px; right: -6px;    top: -6px; bottom: -10px;    z-index: -1;}.botao:active {    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;    top:5px;}.botao:active:before{    top: -11px;    bottom: -5px;    content: "";.azul {    text-shadow:-1px -1px 0 #2C7982;    background: #3EACBA;    border:1px solid #379AA4;    background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);    background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);    background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);    background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);    background-image:linear-gradient(top, #48C6D4, #3EACBA);        -webkit-border-radius:5px;    -moz-border-radius:5px;    border-radius:5px;        -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);}.botao:hover {    background: #48C6D4;    background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);    background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);    background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);    background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);    background-image:linear-gradient(top, #3EACBA, #48C6D4);}

Bom... o problema antes era que ele não afundava, o resto aparecia numa boa. Agora, quando clico o nome desce e sobe, mas o resto do botão fica estático e nem o gradiente de cor aparece mais.... no firefox isso. Abri o Chrome e o gradiente aparece e só isso, o botão continua estático.

Pelo que vi, esse background-image:-moz (é do mozila?), cada -x-linear-gradient(...) o x é para cada navegador? Por isso que fica repetindo toda hora o mesmo código?

DiF · 20 de fevereiro de 2015

Bem.. o problema é que você não fechou este bloco:

.botao:active:before{    top: -11px;    bottom: -5px;    content: "";

Já o outro erro é apenas de formatação no css.. e as cores.

Veja o exemplo a partir do seu código: http://jsfiddle.net/7fngmhso/

Enrique René · 20 de fevereiro de 2015

Bem.. o problema é que você não fechou este bloco:
.botao:active:before{    top: -11px;    bottom: -5px;    content: "";
Já o outro erro é apenas de formatação no css.. e as cores.

Veja o exemplo a partir do seu código: http://jsfiddle.net/7fngmhso/

Pow, perfeito! Valeu mesmo. Mas vou continuar estudando esse código todo aí pra entender bem o que tava acontecendo e tentar fazer a partir do zero.

valeu mesmo!