É uma idéia interessante que coloca um pouco de interatividade no seu site,
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:
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?
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
Não funciona...
Acrestende ao código o position conforme abaixo:
style="position:absolute; z-index:2;"
Não esta Funcionando o Botão na Hora de acender '--'
So Apaga Acender Neco Neco kk
Arrumei Vlw Ai Pessoal Tem Coloca ID 0 Com Botao Acender
cara nao ta funfando nao, so apaga acender nada. vc ta todo errado.
Consegui com que acendesse e apagasse, más quando apaga o preto fica também sobre o vídeo -.-
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..
Postar um comentário