segunda-feira, 12 de abril de 2010

Botão Acender e Apagar a Luz

Você já devem ter visto isso em algum site com vídeos, até mesmo o youtube utilizou isso por um tempo.

É uma idéia interessante que coloca um pouco de interatividade no seu site, apesar de não ter muita utilidade



Confiram um exemplo aqui, esse é um site que eu criei para um programa de TV, e adicionei esse botão.


OK, para fazer isso precisamos de 2 imagens, uma para Apagar a Luz e outra para quando Formos acender a luz. Segue abaixo



Baixem as imagens acima e iremos começar.

Para isso precisamos de CSS e JavaScript.



Começando

Abra uma página (no caso a que tem o seu player de vídeo). Pegue esse video e coloque dentro de uma div com a seguinte propriedade.

Copie o código abaixo e coloque o codigo do seu video entre > <

<div style="z-index: 2;"></div>


E coloque o botão Apagar a Luz dentro de uma div igual a de cima. e coloque sua id como btLuz e uma função luz() como onMouseDown.

Copiem o código abaixo onde você quiser que apareça o seu botão

<div style="z-index:2;"><img src="apagar.png" id="btLuz" onMouseDown="luz()"></div>

Iremos criar agora o fundo preto para ocupar todo espaço na tela.


Coloquem o seguinte código logo após a tag <body>

<div id="fundo"></div>

e criem uma tag style que personalizara a tag do fundo.

copiem o código abaixo e colem acime da tag </head>

<style>
#fundo {
    filter:alpha(opacity=80);
    -moz-opacity:.80;
    opacity:.80;
    width:100%;
    height:1500px;
    background-color:#000000;
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
    display:none;
}

</style>

O código acima faz com que o fundo fique em todo o navegador com uma transparencia de 80% e também invisivel, pois ele só aparecerá quando clicar-mos no botão.

acima da tag </head> coloque

<script>
l = 0
function luz() {
    if (l==0) {
        document.getElementById('fundo').style.display='block';
        document.getElementById('btLuz').src='acender.png';
        l = 1
    }else{
        document.getElementById('fundo').style.display='none';
        document.getElementById('btLuz').src='apagar.png';
        l = 0
    }
}
</script>

o JavaScript acima fará com que o fundo escuro apareça e desapareça, também fará com que o botão troque junto.


Coloque tudo isso para funcionar e se houver um erro comentem.


Valeu galera, logo logo tem mais

10 comentários:

Anônimo disse...

Meu querido só tem um probleminha
quando inserido o codigo a div fundo se sobrepoem ao botão deixando ele inutil como resolver esse problema?

Adriano Moura disse...

havia um erro na digitação

style:"z-index: 2;"
deveria ser

style="z-index: 2;"

após o style deve ser = e não :

Me desculpe o engano e obrigado pela informação

abner disse...

Não funciona...

Anônimo disse...

Acrestende ao código o position conforme abaixo:
style="position:absolute; z-index:2;"

Douglas R disse...

Não esta Funcionando o Botão na Hora de acender '--'

Anônimo disse...

So Apaga Acender Neco Neco kk

Anônimo disse...

Arrumei Vlw Ai Pessoal Tem Coloca ID 0 Com Botao Acender

Anônimo disse...

cara nao ta funfando nao, so apaga acender nada. vc ta todo errado.

Nabesh disse...

Consegui com que acendesse e apagasse, más quando apaga o preto fica também sobre o vídeo -.-

X GAMES AEM disse...

Olá, gostaria muito de por esse botão em meu blog, poderia dizer qual é os códigos certos ...? obrigado vlw..

Parabéns pelo o site vlw..