Ir ao conteúdo
  • Cadastre-se

Botão dinamico


Ir à solução Resolvido por Enrique René,

Posts recomendados

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

Link para o comentário
Compartilhar em outros sites

  • Moderador

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

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

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

Link para o comentário
Compartilhar em outros sites

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?

Link para o comentário
Compartilhar em outros sites

  • Solução

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!

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...